Is it possible to store react router history in a query string param?

243 Views Asked by At

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?

0

There are 0 best solutions below