I have the following BrowserRouter in my main index.js React file:

<React.StrictMode>
<BrowserRouter> 
    <Routes>
        <Route path="/" element={<Main />}>
            <Route path="clients" element={<ClientsList />} > 
                <Route path="client/:clientID" element={<Client />} />
            </Route> 
            <Route path="*" element={<NoContent />} />
        </Route> 

        <Route path="iframe-invoice/:invoiceID" element={<InvoiceFrame />} />
        
    </Routes> 
</BrowserRouter>
</React.StrictMode>

When I load the paths /, clients and client/<clientID> the app correctly display the content of the relative modules in the /app/public/index.html file (as expected):

What I'm trying to do is to render the content of iframe-invoice/:invoiceID in a separate html page, something like /app/public/iframeinvoice.html.

The full HTML content of the module InvoiceFrame will be loaded from a database (both html head, body, styles, etc..) and it require to be rendered outside of the /app/public/index.html file.

Either in an apposite html file with only this:

<noscript>You need to enable JavaScript to tead the invoice</noscript>
<div id="root"></div>
<script type="text/javascript" src="/static/js/bundle.js"></script>

or in some other way.

So basically the React app on iframe-invoice/:invoiceID will have to:

• Request the full HTML page of :invoiceID, with an API call, from the backend
• Cache this HTML in the browser localstorage
• Render this HTML in the browser (probably with dangerouslySetInnerHTML)
• Next time the same invoice is requested load it from the localstorage and render it

Is it possible with React?