Javascript React Router v6：为什么嵌套路由对某些路径有效但对其他路径无效导致错误 404

发布于05月23日

我目前正在学习如何使用react-router V6.我正在为我的App创建嵌套路由，但它们似乎不起作用，我也不知道为什么.

以下是来自路由的代码:

const router = createBrowserRouter(createRoutesFromElements(
  <Route path="/" element={<Root />}>
    <Route path="about" element={<About />} />
    <Route path="sign-up" element={<SignUp />} />
    <Route path="articles" element={<Articles />} />
    <Route path="articles/:title" element={<Article/>} />
    <Route path="categories" element={<Categories />} />
      <Route path=":name" element={<Category/>} />
    <Route/>
    <Route path="profile" element={<Profile />} />
      <Route path="edit" element={<EditProfileForm />} />
    <Route />
    <Route path="authors/:name" element={<Author />}/>
  </Route>
))

function App() {
  return (
    <>
      <RouterProvider router={router} />
    </>
  );
}

第一行嵌套的路由(关于，注册...)运行得很好，但当我试图达到"/categories/:name"或"profile/edit"时，我得到的结果是错误404，我不明白为什么.

我打赌你们知道为什么！

我将它们从嵌套路径中移除，并为它们提供了绝对路径，但它不能作为具有相对路径的子路径运行

以下是该应用程序的屏幕:

app screen in Cayegory nested Route

我在嵌套路由Categories上，我想点击概念链接，该链接应该会将我转到呈现子类别的页面，但我得到的只是一个错误404:

error 404 when trying to load a nestedRoute within category

这里是一个代码Sandbox 的链接，我的项目运行link to codeSandbox.

<Route path="categories" element={<Categories />} /> // <-- closed <Route path=":name" element={<Category />} /> <Route /> // <-- empty <Route path="profile" element={<Profile />} /> // <-- closed <Route path="edit" element={<EditProfileForm />} /> <Route /> // <-- empty

<Route path="categories" element={<Categories />}> // <-- open tag <Route path=":name" element={<Category />} /> </Route> // <-- closing tag <Route path="profile" element={<Profile />}> // <-- open tag <Route path="edit" element={<EditProfileForm />} /> </Route> // <-- closing tag

const router = createBrowserRouter( createRoutesFromElements( <Route path="/" element={<Root />}> <Route path="about" element={<About />} /> <Route path="sign-up" element={<SignUp />} /> <Route path="articles" element={<Articles />} /> <Route path="articles/:title" element={<Article />} /> <Route path="categories" element={<Categories />}> <Route path=":name" element={<Category />} /> </Route> <Route path="profile" element={<Profile />}> <Route path="edit" element={<EditProfileForm />} /> </Route> <Route path="authors/:name" element={<Author />} /> </Route> ) );

Javascript React Router v6：为什么嵌套路由对某些路径有效但对其他路径无效导致错误 404

推荐答案

Javascript相关问答推荐

我不明白这个react 组件有什么问题

JS、C++和C#给出不同的Base 64 Guid编码结果

如何通过在提交时工作的函数显示dom元素？

React存档iframe点击行为

如何为GrapesJS模板编辑器创建自定义撤销/重复按钮？

docx.js：如何在客户端使用文档修补程序

如何使覆盖div与可水平滚动的父div相关？

处理时间和字符串时MySQL表中显示的日期无效

如何在模块层面提供服务？

在Three JS中看不到补间不透明度更改效果

如何避免页面第一次加载时由于CSS样式通过JavaScript更改而出现闪烁

这个值总是返回未定义的-Reaction

连接到游戏的玩家不会在浏览器在线游戏中呈现

使用auth.js保护API路由的Next.JS，FETCH()不起作用

将数组扩展到对象中

我想将Sitecore搜索面过滤器从多个转换为单个

try 将Redux工具包与MUI ToggleButtonGroup组件一起使用时出错

Docent.cloneNode(TRUE)不克隆用户输入

FindByIdAndUpdate在嵌套对象中创建_id

使用jQuery每隔几秒钟突出显示列表中的不同单词