Managing legacy HTML wireframe with embedded JavaScript across route navigations - Preventing re-initialization of injected DOM and scripts

[rmehboob]

Hi everyone,

We're integrating a legacy HTML wireframe system into React Router v7 where we inject complete HTML structures (headers, footers, navigation) with embedded JavaScript into our React components. The wireframe isn't just JavaScript - it's entire HTML sections with associated scripts that get injected via dangerouslySetInnerHTML.

The issue: Every time a nested loader/action executes, React Router re-renders our layout component, which causes:

1. Complete re-injection of wireframe HTML sections (header, footer, navigation)
2. Re-execution of embedded wireframe JavaScript
3. Duplicate event listeners on wireframe elements
4. Repeated API calls from wireframe scripts (cart updates, user status checks)
5. Loss of wireframe state (open menus, form inputs, etc.)

Questions for the Community

• Should wireframe HTML injection happen outside the route component tree entirely, or is there a React Router-specific approach?
• How do we maintain wireframe DOM state across route navigations without full re-injection?

This is essentially about preserving injected legacy HTML/JS wireframe context while allowing React Router to handle the inner application routing.

Thanks In advance!