切换还是路由?React Router是什么

Question

我不能使用"开关"；或"；路由"；使用react路由器(特别是react router dom(。因为对于使用Switch或Routes这两种方式似乎有点困惑，所以我决定两者都试一下，争取有所进展。

我正在使用react路由器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

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

从V5升级到V6反应路由器

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

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