路由器 basename 无法匹配 URL，因为它不以 basename 开头答案

【问题标题】：Router basename is not able to match the URL because it does not start with the basename路由器 basename 无法匹配 URL，因为它不以 basename 开头
【发布时间】：2021-12-29 12:18:52
【问题描述】：

升级到 React Router v6 后，我的应用程序停止工作，我无法找到一种方法来实现与版本 6 相同的行为。

这是我升级到的版本：react-router-dom6.2.1。

这是与之前版本5.2.0一起工作的代码：

<Router basename="/#">
  <Route path="/login">
    <Login />
  </Route>
  <Route path="/">
    <Home />
  </Route>
</Router>

            
<Link to="/login">Login</Link>

然后我导航到http://localhost:3000/#/login。现在连http://localhost:3000 都不起作用了。

这是我在浏览器控制台中得到的完整错误：

无法匹配 URL “/”，因为它不以基本名称开头，因此不会呈现任何内容。

我已经阅读了 StackOverflow 上的所有内容、Github 问题、迁移指南，尝试了许多解决方法，但似乎没有任何东西可以实现旧行为。就像 v6 根本不尊重 URL 片段一样。

我需要 URL 片段，以便当用户刷新页面或为 URL 添加书签时，它确实有效。

如何使用 React Router v6 进行这项工作？

【问题讨论】：

reactrouter.com/docs/en/v6/examples/multi-app
您使用的是HashRouter吗？
@MarioG8 我在发帖前已经查过了。这是一个不同的更简单的情况。我想使用片段为所有内容添加前缀。示例应用几乎按照文档所说的进行。
@DrewReese 没有。我正在使用BrowserRouter。
好的，你试过用HashRouter吗？我相信它基本上已经做了添加"/#" 所做的事情，这正是您所询问的目的。 ??????????‍♂️

标签： reactjs react-router

【解决方案1】：

您需要将 Route 组件包装在 Routes 组件中。 Link 到解释这一点的文档。 Route 组件也有变化，您需要查找。

无论如何，这应该可以：

<Router basename="/#">
  <Routes>
    <Route path="/login" element={<Login />} />
    <Route index path="/" element={<Home />} />
  <Routes>
</Router>

【讨论】：

【解决方案2】：

react 文档在 react 路由器 v6 中没有指定任何关于 basename 的内容，这太可悲了。但是，我尝试了一些东西，它奏效了。请找到以下解决方案。干杯！

    <HashRouter> 
    <Routes>
        <Route path='/app'> {/* put url base here and nest children routes */}
            <Route path='path1' element={ <Somecomponent1 /> } />
            <Route path='path2' element={ <Somecomponent2 /> } />
        </Route>
        <Route path="/*" element={<Navigate to="/app/path1" />}  /> {/* navigate to default route if no url matched */}
    </Routes>
</HashRouter>

【讨论】：