React Router not always routing

help
1

I’m a bit weirded out. So, I have my basic app where I’m using React Router to establish routes.

Now, here’s the thing: On the Main page I have the layout defined and a sidebar/topbar with a bunch of buttons which <Link> to subpages. Those work fine.

One of those buttons links to the Login page. However, on the Login page there’s another small link which is supposed to lead to Register (and on that page is a similar link back to Login).

Both those links on the subpages don’t work as they should - they do change the URL in the address bar but the app itself doesn’t reroute. But if I click on the Login button in the topbar they do not route me to the page they should route to, e.g. the TaskButton does not navigate to the Taskpage but to the Register page (and the URL doesn’t change, too!).

I do not get any errors in the console which makes troubleshooting a bit difficult.

If you want to take a further look, here’s the repo: https://github.com/Rhywden/nawischule

2

Nevermind, finally figured it out with the help of the React plugin for the Chrome Console - issue was that the Main module does not receive new props if the change of said props happens outside the module. Yes, even if you wrap it in withRouter and stuff.

This has to do with the new ReactContext stuff. What this all amounts to is this:

Don’t do:

<Router>
   <ReactProvider>
      <App />
   </ReactProvider>
</Router>

instead do this:

<ReactProvider>
   <Router>
      <App />
   </Router>
</ReactProvider>
1 Like