Question

我遇到了 react-router-dom 的 Switch 导出错误

2022-02-07

46734

reactjs react-router react-router-dom

我遇到以下错误，无法找到解决方案。任何人都可以帮忙吗？

875262940

Answer 1

不要像这样使用

      <Switch>
        <Route exact path="/">
          <Home />
        </Route>
        <Route path="/users">
          <Users />
        </Route>
      </Switch>

像这样使用...

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="users/*" element={<Users />} />
      </Routes>

阅读此文档： https://reactrouter.com/docs/en/v6/upgrading/v5

Answer 2

试试这个。对我来说效果很好 :)

导入

import {
  BrowserRouter as Router,
  Routes,
  Route, Redirect,Navigate
} from "react-router-dom";

这是在 App.Jsx 文件中实现路由的方法

const App = () => {
  const user = true;
  return (<Router>
    <Routes>
      <Route path="/" element={<Home />} />
    </Routes>
  </Router>);

Answer 3

如果您使用的是 react-router-dom v6+，则 Switch 将被 Routes 替换。因此，您只需导入 routes 即可在此处使用它。

在小于 v6 的版本中工作之前：

import { Switch, Route } from "react-router-dom";

现在，在 v6 及以上版本中工作

import { Routes ,Route } from 'react-router-dom';

您还需要将 Route 声明

<Route path="/" component={Home} />

更新为

<Route path='/home' element={<Home/>} />

现在，您的错误将得到解决。