错误：不变式失败：您不应该在 <Router> 之外使用 <Link>答案

【问题标题】：Error: Invariant failed: You should not use <Link> outside a <Router>错误：不变式失败：您不应该在 <Router> 之外使用 <Link>
【发布时间】：2020-02-04 14:06:25
【问题描述】：

我想在我的 react 应用程序中创建一个路由器，它显示此错误，我尝试使用 out 链接并使用 Navlink，但它不起作用。

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;

如何解决？

【问题讨论】：

请包括Rute.js 进口声明以作进一步说明
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';
查看这个答案：stackoverflow.com/questions/48640280/…
我看了但没用
链接组件必须在 BrowserRouter 中

标签： reactjs react-router-dom

【解决方案1】：

链接组件必须在BrowserRouter里面，可以在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>

  );

【讨论】：