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

Posted 2023-02-19

【中文标题】从reach/router切换到react-router时，如何设置basename？

【英文标题】：When switching from reach/router to react-router, how do you set 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，我猜这就是混乱的来源

【参考方案1】：

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

BrowserRouter HashRouter NativeRouter MemoryRouter

例子：

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 是所有其他路由器共享的低级接口。