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

一开始,我把这两个合并成一个<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中的代码越来越长, 我决定用它们制作组件=&gt;所以User.js和Admin.js

如下所示:

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

在我的User.js中:

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

在My Admin.js中:

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

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

我在谷歌上搜索了为什么会发生这种情况,一个人建议使用索引"/",但这无济于事……

有谁知道为什么会出现这个警告吗?

推荐答案

问题似乎是,管理员组件没有呈现"/"的路由,因为它被呈现为根路由级别.我建议在它们自己的路由上渲染用户管理员,以便它们正在渲染的后代路由具有正确的路径,并保持整体路径 struct .请注意,根路由附加了尾随的"*"通配符,以允许也匹配后代路由路径.

示例:

<Routes>
  <Route path="/*" element={<用户 />} />
  <Route path="/admin/*" element={<管理员 />} />
</Routes>

用户

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

管理员

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

Edit react-router-dom-no-routes-mached-location-error

Reactjs相关问答推荐

尽管在CLI中收到来自Stripe的OK Post请求,但没有webhook Post请求的处理- NextJS 14

Reactjs中的chartjs和reaction-chartjs-2的问题

获取点击的国家/地区名称react 映射

是否在Extra Reducer完成作业(job)时触发createListenerMiddleware?

生成Reaction Vite应用程序的停靠容器时无法识别环境变量

我应该如何管理设置组件初始状态的复杂逻辑?

在数组对象内的数组上进行映射

在Reaction中导入';图片&文件夹时出错

状态改变不会触发重新渲染

错误:无法获取 RSC 负载.返回浏览器导航

如何在我的自定义主题中样式化MUI TreeItem组件

如何将 DocuSign 控制台界面嵌入到 React 应用中

每次状态更改时都会提交react 表单

类型错误:类型typeof import(js-cookie)上不存在属性get

当每个元素都可拖动时,移动设备上的滚动列表出现问题

React Three Fiber mesh 标签在此浏览器中无法识别

React Native Realm 应用程序在发布构建后崩溃

.filter() 函数在删除函数中创建循环 - React

您无权使用阻止 webRequest 侦听器.请务必在 list 中声明 webRequestBlocking 权限

如果两个组件在 React 中导入相同的 CSS 文件会发生什么?