问错误:不变量失败:不应在<Router>外部使用<Link>

EN

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;