Question

我想在我的react应用中创建一个路由器，它显示此错误，我尝试使用out链接并使用Navlink，但不起作用下面是我的文件： App.js`：

else

Rute.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';
/*import RestoreIcon from '@material-ui/icons/Restore';
import FavoriteIcon from '@material-ui/icons/Favorite';
import LocationOnIcon from '@material-ui/icons/LocationOn';
*/

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;

如何解决？我不知道为什么不工作。对不起我的英语不好：）谢谢！

Answer 1

链接组件必须位于BrowserRouter内，您可以在返回中进行以下更改。

  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>

  );

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

1 个答案: