CODEWITHSUNDEEP
javascriptreactjsreact-routerreact-router-dom
Alejandro Garcia Anglada
Alejandro Garcia Anglada

Reputation: 2403

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 /.

Upvotes: 5

Views: 2351

Answers (2)

Claudio
Claudio

Reputation: 3095

In order to have a client router that works with both client navigation and direct navigation (like browser bookmark, shared links ans seo) you need to configure a fallback in your server in order to serve index.html (witch will manage client routing)

This becouse brower doesn’t know in which part of your application is routing managed.

If static file are managed by a static server (or if you are behind a reverse proxy) such as nginx you need to use try_files, like that https://stackoverflow.com/a/35039350.

If your static files are managed by your .net application probably you’ll need to configure a default route such as https://stackoverflow.com/a/24564360

During the migration new uri will be resolved as follows:

  1. server side routing
  2. fallback to client side routing

Href inside the application will be resolved as follows:

  1. client side routing
  2. fallback to server side routing.

Upvotes: 2

Jonathan Irwin
Jonathan Irwin

Reputation: 5747

You could add each of the .Net routes to your React router config that reloads when landing on each - something like:

<Route path="/my-dot-net-page" component={ReloadComp} />

Where ReloadComp looks something like:

const ReloadComp: React.FC<RouteComponentProps> = props => (window.location.href = props.location.pathname);

This will cause a reload when landing on each of those routes and it should let your .Net webserver handle the route.

Alternatively I think it might be worth holding back on react-router until you move the whole project across to React.

What are you trying to get from it at the moment?

If you are after navigation without full reloads it will not work between the React pages and your .Net pages - a reload will be required.

Once all the views are in React making the change to react-router will be simpler

Upvotes: 0

Related Questions