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

Question

我不能将“Switch”或“Routes”与 react 路由器一起使用（特别是 react-router-dom）。因为在使用 Switch 或 Routes 似乎有点困惑，我决定尝试两者都尝试到达某个地方。

我正在使用 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 版似乎太破了。

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

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

这是错误的，让我的 IDE 感到困惑。

Answer 1

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

Upgrading from V5 to V6 react router

您需要根据文档将所有 Switch 标签 元素升级为 V6 中的 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

我不认为这是版本中的错误。 v6 中的 Routes 组件有效地替换了 v5 中的 Switch 组件。 v6.2.1 是当前版本，在代码框中检查后，它会毫无问题地导入 Routes 组件。

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

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

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

npm start