路由器基本名称无法匹配 URL，因为它不是以基本名称开头

Question

升级到 React Router v6 后，我的应用程序停止工作，并且我未能找到在版本 6 中实现相同行为的方法。

这是我升级到的版本：react-router-dom 6.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行不通了。

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

<Router basename="/#"> 无法匹配 URL“/”，因为它不是以基本名称开头，因此 <Router> 不会呈现任何内容。

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

我需要 URL 片段，以便当用户刷新页面或为 URL 添加书签时，它实际上可以工作。

如何使其与 React Router v6 一起工作？

Answer 1

令人遗憾的是，React 文档没有指定有关 React Router v6 中的基本名称的任何内容。然而，我尝试了一些方法并且成功了。请找到以下解决方案。干杯！

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

Answer 2

您需要将 Route 组件包装在 Routes 组件内。解释这一点的文档链接。您需要查找的路线组件也发生了变化。

无论如何，这应该有效：

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