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.

Nimantha · Accepted Answer · 2021-10-29 08:01:10Z

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, 2021 at 8:01

Nimantha

6,5376 gold badges32 silver badges78 bronze badges

answered Jan 7, 2020 at 2:47

David Desjardins

2241 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

codebee Over a year ago

Also I followed this: flaviocopes.com/react-router apparently you cannot have a Link outside of a Router, React throws an error.

David Desjardins Over a year ago

Exactly, is you link elements are inside page1 or page2 ? I will update my post with a working exemple.

David Desjardins Over a year ago

I fixed your sandbox, they were alot of mistakes presents. codesandbox.io/s/…

David Desjardins Over a year ago

This is how the architecture should be. You can message me if you have more questions on the structure.

David Desjardins Over a year ago

Btw <Switch> is like a switch case, the first matching path is the one that will be rendering so you should place "/" at the end.

|

Nimantha · Accepted Answer · 2021-10-29 08:00:54Z

0

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.

edited Oct 29, 2021 at 8:00

Nimantha

6,5376 gold badges32 silver badges78 bronze badges

answered Jan 7, 2020 at 3:38

Stefano Martell

391 silver badge5 bronze badges

Collectives™ on Stack Overflow

how to debug react router not loading component on url change

2 Answers 2

9 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related