Monday, 12 August 2019

Browser History not working when going back in react-router-dom

We are working in a project which is written in dotnet with Razor views (Pure Backend stack). Our plan to move every view to React using react-router-dom to handle routing in the client and server.

What we have in mind is to move page by page not to do a big bang because the project is already in production.

Client Router

import { Router } from 'react-router-dom'
import { createBrowserHistory, History } from 'history'

const history: History = createBrowserHistory({ basename: baseUrl })

<Router history={history}>
  <Switch>
      <Route path="/example" component={Example} />
      ...
   </Switch>
</Router>

Server Router

import { StaticRouter } from 'react-router-dom'

<StaticRouter
 basename={basename}
 context={routerContext}
 location={params.location.path}
>
   <Switch>
      <Route path="/example" component={Example} />
      ...
   </Switch>
</StaticRouter>

The problem

When I navigate to / (in .net router) from /example (in react router) and then I try to go back to /example, it looks like there is no transition to the react router and the browser history stays on /.

Thanks in advance.



from Browser History not working when going back in react-router-dom

No comments:

Post a Comment