为什么我不能使用 react-router-dom 中的“路由”，即使它是版本 6？ 它显示错误

Question

我一直在尝试从import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'; -router-dom 中获取“路由”，就像这样我在这里称之为：

const NavPage = () => {
  return (
    <React.Fragment>
      <section>
        <Routes>
        <Route path="/home" element={<Home />} />
        <Route path="/goals" element={<Goals />} />
        <Route path="/meetings" element={<Meetings />} />
        <Route path="/tasks" element={<Tasks />} />
        <Route path="/reviews" element={<Reviews />} />
        <Route path="/feedback" element={<Feedback />} />
        <Route path="/recognitions" element={<Recognitions />} />
        <Route path="/notes" element={<Notes />} />
        </Routes>
      </section>      
    </React.Fragment>
  );
};

它抛出一个错误： export 'Routes' (imported as 'Routes') was not found in 'react-router-dom' (possible exports: BrowserRouter, HashRouter, Link, MemoryRouter, NavLink, Prompt, Redirect, Route, Router, StaticRouter, Switch, generatePath, matchPath, useHistory, useLocation, useParams, useRouteMatch, withRouter)

我的 react-router-dom 版本是 6 enter image description here

我尝试使用Switch ，但它对我不起作用

Answer 1

根据图像，您安装了react-router-dom@^5.1.2 。

最新版本是 v6.8.0。 看起来您的 IDE 只是在通知您 hover 超过该依赖项时最新版本是什么。

如果您想使用 v6.8.0，那么您需要实际安装它并更新您项目的 package.json 文件。

从项目根目录中的终端直接运行以下命令以更新到 v.6.8.0 并更新 package.json 文件。

npm install --save react-router-dom@latest

从这里开始，项目应该拥有所有可用的 RRDv6 组件。

react-router-dom重新导出react-router的所有内容，因此没有必要将其额外列为依赖项，特别是如果它仍然是以前的版本。 如果安装了react-router ，卸载它，然后安装react-router-dom@6 。

npm uninstall --save react-router