交换机还是路由？React Router 是哪个？

Question

我无法将“Switch”或“Routes”与react router（特别是react-router-dom）一起使用。因为对于使用哪一个，交换机还是路由似乎有点混乱，所以我决定尝试两者来尝试到达某个地方。

我正在使用react-router-dom版本：

"react-router-dom": "^6.2.1",

如果我像这样导入：

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'

编译器说Cannot resolve symbol 'Routes'

如果我像这样导入 Switch ：

import { BrowserRouter as Router, Route, Switch} from 'react-router-dom'

然后我得到这个错误export 'Switch' (imported as 'Switch') was not found in 'react-router-dom'

这是版本中的一些错误吗？

********** 更新 ***********

我已经回滚到 React Router/Dom 版本 5.2.0。

6.x 版本似乎太糟糕了。

例如，在 @type 模块中安装版本 6.x 会安装错误的类型。

"name": "@types/react-router",
"version": "5.1.17",

这是错误的并且使我的 IDE 感到困惑。

Answer 1

这不是一个错误。这是关于反应路由器版本的。由于版本 6 与版本 5 完全不同，并且使用Routes而不是Switches。您仍然可以通过降级到版本 5 来使代码正常工作，或者如果您想使用新版本，请遵循迁移计划：

从 V5 升级到 V6 React 路由器

您需要根据文档将V6中的所有Switch标签元素升级为Route标签元素。

V5代码示例：

    // This is a React Router v5 app
    import {
      BrowserRouter,
      Switch,
      Route,
      Link,
      useRouteMatch
    } from "react-router-dom";
    
    function App() {
      return (
        <BrowserRouter>
          <Switch>
            <Route exact path="/">
              <Home />
            </Route>
            <Route path="/users">
              <Users />
            </Route>
          </Switch>
        </BrowserRouter>
      );
    }

这是 v6 中的同一个应用程序：

// This is a React Router v6 app
import {
  BrowserRouter,
  Routes,
  Route,
  Link
} from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="users/*" element={<Users />} />
      </Routes>
    </BrowserRouter>
  );
}

Answer 2

我不认为这是版本中的错误。Routesv6 中的组件有效地替换了v5Switch中的组件。v6.2.1 是当前版本，只需在codesandbox 中检查它后，它就可以Routes毫无问题地导入组件。

尝试卸载react-router-dom并重新安装它。确保杀死所有开发代码观察者/热重载器。

npm uninstall -s react-router-dom react-router
npm install -s react-router-dom@latest

然后重新启动您的开发构建。

npm start