当从reach/路由器切换到reach路由器时，如何设置basename？

Question

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

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

但是在v6的react路由器中，它看起来是这样的：

<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>

打字本抱怨：

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

我猜我可以从useLocation()获得位置，但是似乎没有一种方法可以获得导航器。

Answer 1

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

• BrowserRouter
• HashRouter
• NativeRouter
• MemoryRouter

示例：

import { BrowserRouter, Routes, Route } from 'react-router-dom';

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

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