5

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

Alejandro Garcia Anglada
  • 2,373
  • 1
  • 25
  • 41

2 Answers2

2

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.
PositiveGuy
  • 17,621
  • 26
  • 79
  • 138
Claudio
  • 3,060
  • 10
  • 17
  • This looks like the thing you will do, but I realise it will be weird to have some part of the website routing in client and some other on the server as Jonathan says in his post. Thanks for your help. – Alejandro Garcia Anglada Aug 13 '19 at 08:39
0

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

Jonathan Irwin
  • 5,009
  • 2
  • 29
  • 48
  • This looks like a bit of a hack, as you said it will be weird to have part of the website routing in the client and other in the server. Thanks for making me think about that. – Alejandro Garcia Anglada Aug 13 '19 at 08:40