When I use the <Link> it from this route error, what can it be?

Asked

Viewed 47 times

0

Esse é o erro quando vou usar o Error: Invariant failed: You should not use outside a

I’ve reinstalled React-Router-Dom, and I can’t fix it.

 import React from 'react';
 import {BrowserRouter, Route, Switch} from 'react-router-dom';

 import Home from './pages/Home/index';
 import AboutUs from './pages/AboutUs/index';

 export default function Routes(){


return(

    <BrowserRouter>
    
        <Switch>
            <Route path="/" exact component={Home}/>
            <Route path="/" component={AboutUs}/>
        </Switch>

    </BrowserRouter>

);

}
javascript react react-router-dom

  • You can only use the Link inside the Router, put your router code here that will be easier to help.

  • @Lucasbrogni Prontin

2 answers

0

Your path to the two is pointing to the route table, try changing this, and see how you’re using the Link on the pages

<BrowserRouter>
        <Switch>
            <Route path="/" exact component={Home}/>
            <Route path="/about" component={AboutUs}/>
        </Switch>
    </BrowserRouter>

  • This is a mistake really, but what he put in the question is another one is about putting <Link> outside the <BrowserRouter>

0

In your example code, there is no <Link>, I think you’re putting the <Link> outside the <BrowserRouter> and this is not allowed, as it is in the documentation and the documentation code already shows this however, ie the <Link> has to be inside <BrowserRouter>, example:

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

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

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

function Users() {
  return <h2>Users</h2>;
}

Rights link site code: https://reactrouter.com/web/guides/quick-start

and that’s how it should be done.

Browser other questions tagged javascript react react-router-dom

You are not signed in. Login or sign up in order to post.