Title seems confusing because it is. So I have a laravel and its own Reactjs stuff, lets call it reactA.
So I have another JS that is another react, lets call it reactB, doing its on thing and render on a <div>. Which uses requirejs to get all the js and using backbonejs to do the routing.
And I have manage to 'put' reactB pages into reactA, where reactA is like the main page with a Nav on the left hand side and content on the right. The Nav consist of link of both reactA and reactB. When a reactB link is clicked a blank <div> will be rendered and reactB will render its stuff to said <div>.
The situation is like this, whenever the Nav (owned by reactA) link is pressed, seems to me (correct me if im wrong) that only reactA props and states is updated and not in reactB. Which as a result, the reactB's react-router-dom stuff will not be updated (useLocation,useSearchParams etc). I found out about this because I have reactB print the this.props.pathname while press the Nav link and sees that the pathname is not updated.
Now to by pass this situation I will do a windows.location.reload when a reactB link is clicked then reactB will load its content no problem. But the web page will be slow because everything is reloaded.
I was wondering if there is a way for reactB to reload all its props and states without a full page reload?
Note that reactA and reactB share a very different code so to merge it would likely be a whole rewrite of the code.