how to debug react router not loading component on url change

Question

I'm using react-router-dom version 4.3.1 Upon clicking the link, the URL changes but React Component is not rendered (in fact the debugger does not stop at any point in my code). I have already tried using withComponent and exact keywords, but that doesn't work as well. It is mentioned in the following two solutions: React router changes url but not view and react route using browserhistory changes url but nothing happens The only time it works is when the page is refreshed using the refresh button. I'm loading the router in the root element in index.js:

ReactDOM.render(<AppRouter />, document.getElementById("root"));

AppRouter has this code:

export const AppRouter = () => {
    return (
        <>
        <HashRouter>
        <div>
        <Switch>
        <Route path="/page1" component={Page1} />
        <Route path="/page1" component={withRouter(Page2)} /> //still doesn't work
        <Route exact path="/" component={Home} />
        </Switch>
        </div>
        </HashRouter>
        </>
        )}

Then in my page I have:

<Router>
        <div>
        <Link to={'/page1'}>Page 1</Link>
        <Link to={'/page2'}>Page 2</Link>
        </div>
</Router>

What's interesting is that it was working but after I shuffled around load order of my components, it stopped working. How can I debug this? Thanks.

score 2 · Accepted Answer · edited Oct 29 '21 at 08:01

2

Nesting a router in a router can cause this kind of problem. Upon clicking on the <Link> you update the history stack in the top <Router> element and not on the <HashRouter> . I think if you delete the inner <Router> every thing should start working.

export const AppRouter = () => {
  return (
    <>
      <HashRouter>
        <div>
          <Link to={"/page1"}>Page 1</Link>
          <Link to={"/page2"}>Page 2</Link>
        </div>
        <div>
          <Switch>
            <Route path="/page1" component={Page1} />
            <Route path="/page1" component={withRouter(Page2)} /> //still
            doesn't work
            <Route exact path="/" component={Home} />
          </Switch>
        </div>
      </HashRouter>
    </>
  );
};

edited Oct 29 '21 at 08:01

Nimantha

6,405
6
28
69

answered Jan 07 '20 at 02:47

David Desjardins

224
1
5

Also I followed this: https://flaviocopes.com/react-router/ apparently you cannot have a `Link` outside of a `Router`, `React` throws an error. – codebee Jan 07 '20 at 03:32
1

Exactly, is you link elements are inside page1 or page2 ? I will update my post with a working exemple. – David Desjardins Jan 07 '20 at 14:47
Thanks for posting code David. I want to have `Link` and `Route` in different files like you can see here: https://codesandbox.io/s/determined-johnson-9h7p4?fontsize=14&hidenavigation=1&theme=dark In this case I'm getting this error: `Invariant failed: You should not use outside a ` – codebee Jan 09 '20 at 01:27
1

I fixed your sandbox, they were alot of mistakes presents. https://codesandbox.io/s/quirky-water-jibnk?fontsize=14&hidenavigation=1&theme=dark – David Desjardins Jan 09 '20 at 02:23
1

This is how the architecture should be. You can message me if you have more questions on the structure. – David Desjardins Jan 09 '20 at 02:23
1

Btw is like a switch case, the first matching path is the one that will be rendering so you should place "/" at the end. – David Desjardins Jan 09 '20 at 02:25
Thanks David. I don't see the updates on codesandbox.io link though. Maybe you have to click on 'share' and get a new link for changes to show? – codebee Jan 09 '20 at 02:40
https://codesandbox.io/s/quirky-water-jibnk-updated-t3iwk is this one working ? – David Desjardins Jan 09 '20 at 02:47
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/205712/discussion-between-codebee-and-david-desjardins). – codebee Jan 09 '20 at 23:24

score 0 · Answer 2 · edited Oct 29 '21 at 08:00

The <Router> on your Page component is not necessary, as you are defining a <Router> within another one. Besides, you might have a typo:

        <Route path="/page1" component={Page1} />
        <Route path="/page1" component={withRouter(Page2)} /> //still doesn't work
        <Route exact path="/" component={Home} />

Second line should have path='/page2', as you render Page2 on the component prop.

how to debug react router not loading component on url change

2 Answers2