React Router: Force actual render of library components after navigation (SPA)

Question

I have a generic problem whereby whenever I add React Router into one of my React project it proceeds to break other libraries ability to render, typically being packages from NPM such as Apex Charts and JQuery's JVectorMap.

If I refresh the page the above mentioned libs work, however when we do an SPA navigate (don't actually refresh or change the page, just swap out some active view) it cannot render these components.

The more libs I use for my components the more seem broken, which is why it leads me to believe this is an issue with React Router. Is there a way to force a sort of refresh on page load with React Router to resolve this issue?

I have come up with some hacky solutions like firing events on component mount that force a refresh or resize of the page, but this does not feel like the correct way to handle this problem. Please advise.

Answer 1

SOLVED: just use react wrappers for libraries that have them. In my case both Apex Charts and Jvectormap have solid wrappers written for React on npm. Now when I use them it can handle reloading on navigation just fine :)

I suspect this was in fact an issue with React (perhaps v18 strict mode) and not React Router, although I can't say for sure.