reactjs - React router dom "no routes mached location"错误/在路由器内制作组件

Question

我正在制作具有管理和用户页面的网站。

一开始我将两者合并为一个 <Routes>

<BrowserRouter>
  <Routes>
   // user related pages...
   <Route path="/" element={<>}/>
   <Route path="/signin" element={<>}/>
   .
   .
   .
  // admin related pages 
  <Route path="/admin" element={<>}/>
  <Route path="/admin/signin" element={<>}/>
  .
  .
  .
 </Routes>
</BrowserRouter>

因为我的 Router.js 中的代码越来越长， 我决定用它们制作组件 => 所以 User.js 和 Admin.js

像这样:

<BrowerRouter>
  <User/>
  <Admin/>
</BrowserRouter>

在我的 User.js 中:

<Routes>
  <Route path="/" element={<>}/>
  <Route path="/signin" element={<>}/>
</Routes>

在我的 Admin.js 中:

<Routes>
  <Route path="/admin" element={<>}/>
  <Route path="/admin/signin" element={<>}/>
</Routes>

问题:路由器功能正常... 但我在控制台中收到警告: 例如)没有路线与位置匹配...(对于我设置的每条路线)

我用谷歌搜索了为什么会发生这种情况，有人建议使用“/”索引，但这没有帮助......

谁知道为什么会出现此警告？

Answer 1

问题似乎是 Admin 组件没有渲染 "/" 的路由，因为它被渲染为根路由级别。我建议在自己的路由上渲染 User 和 Admin ，以便它们渲染的后代路由具有正确的路径，并且保持整体路径结构。请注意，根路由附加一个尾随的 "*" 通配符匹配器，以允许后代路由路径也被匹配。

示例:

<Routes>
  <Route path="/*" element={<User />} />
  <Route path="/admin/*" element={<Admin />} />
</Routes>

用户

const User = () => (
  <Routes>
    <Route path="/" element={....} />
    <Route path="signin" element={....} />
  </Routes>
);

管理员

const Admin = () => (
  <Routes>
    <Route path="/" element={....} />
    <Route path="/signin" element={....} />
  </Routes>
);