React Router problem with "Link", Error: Invariant failed: You should not use <Link> outside a <Router>

Question

My issue is when I try to use "Link" in my Nav.js, I get an Error of

[ Here is my Products.js4

try putting <div className="App"><Router></Router></div> inside your div in App.js — lala
– lala, Commented Nov 15, 2020 at 15:16
return ( <div className="App"> <Router> <Nav /> <Switch> <Route path="/" exact component={Home} /> <Route path="/orders" component={Orders} /> <Route path="/products" component={Products} /> </Switch> </Router> </div> ); — Ian
– Ian, Commented Nov 15, 2020 at 15:24

lala · Accepted Answer · 2020-11-15 15:42:33Z

1

The first error that may occurs will come from your Home function component:-

in App.js:- edit your const Home to this (it should be wrap in return):-

const Home = () => {
  return (
    <div>
      <h1>Homepage</h1>
    </div>
  )
}

Other than that everything will works just fine tho. Anyhow, you can see it here on this sandbox to compare it with your current code.

answered Nov 15, 2020 at 15:42

lala

1,4391 gold badge15 silver badges24 bronze badges

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

4 Comments

Ian Over a year ago

Thank you for the sandbox. My code matches up... Am I missing something? Like a npm install or something?

lala Over a year ago

Sometimes it could happen because of the react, react-dom and router-router-dom not up to date. Try see the version that you have now and get it up to the latest one

Ian Over a year ago

Okay... I give up trying to understand why. In the end, I just copy and paste your code and it works. Thank you!

lala Over a year ago

Glad I can help

krimo · Accepted Answer · 2020-11-15 15:23:40Z

1

use <BrowserRouter> in Nav component

answered Nov 15, 2020 at 15:23

krimo

6942 gold badges8 silver badges27 bronze badges

2 Comments

Ian Over a year ago

Wait.... A new issue has come from that. Now when I click on the link. It changes the URL to /whatever but it does not change the screen. I would need to actually manually refresh the page.

krimo Over a year ago

You need to specify the attribute exact for your indexRoute '/' <Route exact path="/" component={Home} /> in App.js

Collectives™ on Stack Overflow

React Router problem with "Link", Error: Invariant failed: You should not use <Link> outside a <Router>

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related