CODEWITHSUNDEEP
reactjsreact-router
van
van

Reputation: 167

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

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?

Upvotes: 4

Views: 12458

Answers (4)

Matt
Matt

Reputation: 35281

You have the wrong import.

Change this:

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

to this:

import Link from "next/link";

Upvotes: 0

hang-coder
hang-coder

Reputation: 450

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';

Upvotes: 0

Devin Ekadeni
Devin Ekadeni

Reputation: 648

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

Upvotes: 0

Nathan Sainsbury
Nathan Sainsbury

Reputation: 443

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>
  );
}

Upvotes: 8

Related Questions