从reach/router切换到react-router时，如何设置basename？答案

【问题标题】：When switching from reach/router to react-router, how do you set basename?从reach/router切换到react-router时，如何设置basename？
【发布时间】：2022-01-23 01:18:32
【问题描述】：

我正在从reach/router 迁移到react-router v6，我有一组这样的路由

<Router basename={appPath}>
  <Dashboard path="/" />}
  <DashboardMessages path="messages"/>
  <DashboardTasks path="tasks" />
  <AboutPage path="about" />
</Router>

但是在 v6 的 react-router 的新样式中，它看起来像：

<Routes>
  <Route path="/" element={<Dashboard />}>
    <Route
      path="messages"
      element={<DashboardMessages />}
    />
    <Route path="tasks" element={<DashboardTasks />} />
  </Route>
  <Route path="about" element={<AboutPage />} />
</Routes>

但路线不采用基本名称。我该如何设置？

更新：在文档中它说：

"该道具可用于制作所有路线和链接在您的应用程序中，相对于他们的 URL 路径名的“基本”部分所有股。 "

但如果你这样做：

<Router basename={appPath}>
 <Routes>
  <Route path="/" element={<Dashboard />}>
    <Route
      path="messages"
      element={<DashboardMessages />}
    />
    <Route path="tasks" element={<DashboardTasks />} />
  </Route>
  <Route path="about" element={<AboutPage />} />
 </Routes>
<Router>

Typescript 抱怨说：

 Type '{ children: Element; basename: string; }' is missing the following properties from type 'RouterProps': location, navigator

我猜我可以从 useLocation() 获取位置，但似乎没有办法获取导航器。

【问题讨论】：

我没有遇到与您相同的错误。你能提供一个可重现的例子吗？
@TheTisiboth 你在尝试react-router-dom v6 吗？检查文档中的Router 接口/类型声明，location 和navigator 是必需的道具。
是的，看这里：codesandbox.io/s/keen-danilo-956mz?file=/src/index.js
啊，我明白了，我没有使用路由器组件，而是使用 BrowserRouter，我猜这就是混乱的来源

标签： reactjs react-router react-router-dom

【解决方案1】：

使用管理导航上下文的高级路由器之一。

例子：

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

<Router basename={appPath}>
 <Routes>
  <Route path="/" element={<Dashboard />}>
    <Route
      path="messages"
      element={<DashboardMessages />}
    />
    <Route path="tasks" element={<DashboardTasks />} />
  </Route>
  <Route path="about" element={<AboutPage />} />
 </Routes>
<Router>

Router 是所有其他路由器共享的低级接口。

【讨论】：