I want to put multiple react components on a single page that use react routers that don't use memory history so that the browser's back button works and so that URLs will be sharable. I've been looking for a library but haven't found one that would be able to store the router location in a customizable query string param and updated with the URL encoded route with pushState
. Something like
<Router history={createQueryStringHistory({ key: 'myKey' })}>
<Route path="/component" component={MyComponent}>
<Route path="/component/:id" component={MyItem}>
then the url would be updated like
/?myKey=%2Fcomponent
/?myKey=%2Fcomponent%2F1
and if there were another React component on the page that used the same router, it could create the history with a different query string key. Would this be possible, and is there already a library out there that does this?