React - Error: Invariant failed: You should not use <Link> outside a <Router>

Question

There are many instances of this error on Stack Overflow but sadly nothing that has aided in debugging the issue. Hoping someone can help me to understand why, see below my code.

Navbar.js:

import React from 'react';
import { Link } from 'react-router-dom'
 const Navbar = ()=>{
    return(
            <nav className="nav-wrapper">
                <div className="container">
                    <Link to="/" className="brand-logo">Shopping</Link>

                    <ul className="right">
                        <li><Link to="/">Shop</Link></li>
                        <li><Link to="/cart">My cart</Link></li>
                        <li><Link to="/cart"><i className="material-icons">shopping_cart</i></Link></li>
                    </ul>
                </div>
            </nav>  
    )
}

export default Navbar;

App.js:

import React from 'react';
import logo from './assets/logo.png';
import './styles/App.css';
import CartHeader from './components/CartHeader.js';
import Navbar from './components/Navbar.js';

function App() {
  return (
    <div className="App">
      <Navbar />
      <header className="App-header">
        <div className="App-header-left">
          <img src={logo} className="App-logo" alt="logo" />
        </div>
        <div className="App-header-right">
          <CartHeader />
        </div>
      </header>

      <body className="App-body">
        <div className="App-body-image-container">
          <h1 className="Green-header">Greenleaf</h1><h2 className="White-header">The apple of your eye.</h2>
        </div>
      </body>

    </div>
  );
}

export default App;

package.json: Amongst many other things, "react-router-dom": "^5.2.0", is listed under dependencies.

The app itself compiles without errors, but the Error: Invariant failed: You should not use < Link > outside a < Router > error is shown in the browser. Any ideas?

Nathan Sainsbury · Accepted Answer · 2020-05-22 17:59:15Z

8

so I can see you're using <Link> and importing it from the right place, however, you're not wrapping your <App> in a <Router>.

Check out the react-router-dom documentation for extra support.

Here's an example of how react-router-dom works:

export default function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/users">Users</Link>
            </li>
          </ul>
        </nav>

        {/* A <Switch> looks through its children <Route>s and
            renders the first one that matches the current URL. */}
        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/users">
            <Users />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

If you notice, the Links are inside the Router.

So in your case, you might want to do:

import React from 'react';
import logo from './assets/logo.png';
import './styles/App.css';
import CartHeader from './components/CartHeader.js';
import Navbar from './components/Navbar.js';
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from 'react-router-dom';
function App() {
  return (
    <Router>
    <div className="App">
      <Navbar />
      <header className="App-header">
        <div className="App-header-left">
          <img src={logo} className="App-logo" alt="logo" />
        </div>
        <div className="App-header-right">
          <CartHeader />
        </div>
      </header>

      <body className="App-body">
        <div className="App-body-image-container">
          <h1 className="Green-header">Greenleaf</h1><h2 className="White-header">The apple of your eye.</h2>
        </div>
      </body>

    </div>
    <Router>
  );
}

answered May 22, 2020 at 17:59

Nathan Sainsbury

4531 gold badge5 silver badges13 bronze badges

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

2 Comments

van Over a year ago

Perfect! I tried to wrap the <App/> tag in index.js in <Router /> but it threw an undefined error, adding it inside the app tags in App.js seems to have fixed things! Thank you :)

Belete Yaregal Over a year ago

Thanks so much; I forget to use <Router> </Router> in App.js tag after I use Link tags.

Devin Ekadeni · Accepted Answer · 2020-05-22 17:59:50Z

0

Have you wrap your App component with Router tag? as example:

// index.js

<Router>
  <App />
</Router>

also resource from its docs https://reacttraining.com/react-router/web/example/basic

answered May 22, 2020 at 17:59

Devin Ekadeni

6486 silver badges17 bronze badges

2 Comments

van Over a year ago

I get the following

Failed to compile.  ./src/index.js   Line 9:6:  'Router' is not defined  react/jsx-no-undef  Search for the keywords to learn more about each error.

if I wrap the <App /> tag in a <Router /> tag. Do I need to reference react-router-dom in index.js?

Devin Ekadeni Over a year ago

yea, you should import { Router } from 'react-router-dom' in your index.js

hang-coder · Accepted Answer · 2021-05-17 04:09:58Z

0

The simplest answer is right inside official doc from reactstrap for Navbar https://reactstrap.github.io/components/navbar/

They guided that we need to use this import

import {NavLink} from 'reactstrap';

answered May 17, 2021 at 4:09

hang-coder

4504 silver badges8 bronze badges

Comments

Matt · Accepted Answer · 2021-08-29 18:30:35Z

0

You have the wrong import.

Change this:

import { Link } from 'react-router-dom'

to this:

import Link from "next/link";

answered Aug 29, 2021 at 18:30

Matt

35.6k30 gold badges94 silver badges107 bronze badges

Collectives™ on Stack Overflow

React - Error: Invariant failed: You should not use <Link> outside a <Router>

4 Answers 4

2 Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related