Error: Invariant failed: You should not use outside a

Question

I want to create a router in my react app and it shows this error, I tried with out link and using Navlink but it doesn't work.

App.js`:

import React from "react";
import "./App.css";
import { Link } from "react-router-dom";
import Rute from "./components/Rute";
import BottomNavigation from "@material-ui/core/BottomNavigation";
import BottomNavigationAction from "@material-ui/core/BottomNavigationAction";

function App() {
  const [value, setValue] = React.useState("recents");

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  return (
    <React.Fragment>
      <BottomNavigation value={value} onChange={handleChange}>
        <Link to="/">
          <BottomNavigationAction label="acasa" value="acasa" />
        </Link>
        <Link to="/harta">
          <BottomNavigationAction label="harta" value="harta" />
        </Link>
        <Link to="/lista">
          <BottomNavigationAction label="lista" value="lista" />
        </Link>
      </BottomNavigation>
      <Rute />
    </React.Fragment>
  );
}

export default App;

How to fix it?

Please include `Rute.js` import statement for further clarification — Nane, Oct 07 '19 at 09:30
`import React, { PureComponent } from 'react' import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'; import Home from '../screns/Home'; import Lista from '../screns/Lista'; import Harta from '../screns/Harta';` — Cosmin Ciolacu, Oct 07 '19 at 09:32
check this answer: https://stackoverflow.com/questions/48640280/you-should-not-use-link-outside-a-router — SuleymanSah, Oct 07 '19 at 09:32

score 0 · Accepted Answer · answered Oct 07 '19 at 09:38

Link component must be inside BrowserRouter, you can make the following change in the return.

  return (
    <React.Fragment>
      <Rute>
      <BottomNavigation value={value} onChange={handleChange}>
        <Link to="/">
          <BottomNavigationAction label="acasa" value="acasa" />
        </Link>
        <Link to="/harta">        <BottomNavigationAction label="harta" value="harta" />
        </Link>
        <Link to="/lista">        <BottomNavigationAction label="lista" value="lista" />
        </Link>
      </BottomNavigation>
      </Rute>
    </React.Fragment>

  );

Error: Invariant failed: You should not use outside a

1 Answers1