I have a setup where I have a navigation side bar (jinja2) that on navigation selection click routes to different pages provided by TemplateResponse's in FastAPI. I'm using htmx to give that nice snappy SPA feeling.

This works fine for jinja2 pages, I'm able to do something like

htmx_attrs={
        'hx-get': '/homepage',
        'hx-push-url': 'true',
        'hx-target': 'body'
    }

However I would like to add some React rendering into the jinja2 templates. So I have a <div id=root></div> that get's hydrated by React on render (theoretically). The problem I'm running into is that the page isn't actually rendering entirely when I click on the nav option. The jinja2 parts of the template that are there will load fine, but the root div remains empty. If I'm on the page and refresh the whole page the react hydrates the page fine. The only way I've been able to make it work consistently is to abandon htmx and onclick reload the whole page.

However, that's a really annoying user experience. Some nav items feel snappy like a SPA and others reload the whole page in your face, it's jarring.

Does anyone know how you could achieve this? I've tried quite a few ways, with custom events, varied htmx attributes, adding junk to the url and in the page to just see if jinja2 will actually re-render everything when it's clicked, but it won't no matter what I do.

Any insight would be greatly appreciated.