為什么我不能使用 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