React Router v6嵌套路由问题：访问/admin/users跳转404页面

问题场景 #

使用react-router-dom v6实现嵌套路由时，访问/admin/users路由无法显示目标页面，反而跳转到NotFound页面。App组件包含导航栏和全局路由配置，子路由定义在Dashboard组件中，但系统无法匹配到/admin/users路由，触发了兜底的404重定向。

问题原因 #

React Router v6的嵌套路由需要父路由预留子路由的渲染入口，同时路由匹配逻辑要求父路径能覆盖子路径。原代码存在两个核心问题：

• App中/admin路由仅匹配精确的/admin路径，未配置子路由的匹配规则，导致/admin/users直接触发兜底路由
• Dashboard内的子路由使用了绝对路径/admin/users，但此时App的路由系统已经无法匹配到该路径，自然无法渲染对应组件

解决方案 #

提供两种可行的修改方式：

方式一：父路由通过children定义子路由，子组件用Outlet渲染 #

修改App.js，为/admin路由添加children属性定义子路由，并在Dashboard中用Outlet承载子路由内容：

修改后的App.js

function App() {
  return (
    <div>
      <NavBar />
      <div className="content">
        <Routes>
          <Route path="/products/:id" element={<ProductDetails />} />
          <Route path="/products" element={<Products sortBy="newest" />} />
          <Route path="/posts/:year?/:month?" element={<Posts />} />
          <Route path="/message" element={<Navigate replace to="/posts" />} />
          {/* 配置/admin父路由及子路由 */}
          <Route path="/admin" element={<Dashboard />}>
            <Route path="users" element={<Users />} />
            <Route path="posts" element={<Posts />} />
          </Route>
          <Route path="/" element={<Home />} />
          <Route path="/404" element={<NotFound />} />
          <Route path="*" element={<Navigate to="/404" replace />} />
        </Routes>
      </div>
    </div>
  );
}

export default App;

修改后的Dashboard.jsx

import React from "react";
import SideBar from "./sidebar";
import { Outlet } from "react-router-dom";

const Dashboard = () => {
  return (
    <div>
      <h1>Admin Dashboard</h1>
      <SideBar />
      {/* 用Outlet渲染匹配到的子路由组件 */}
      <Outlet />
    </div>
  );
};

export default Dashboard;

方式二：父路由路径添加/*匹配子路径，子组件用相对路径定义路由 #

修改App.js中/admin的路径为/admin/*，同时Dashboard内的子路由使用相对路径：

修改后的App.js

function App() {
  return (
    <div>
      <NavBar />
      <div className="content">
        <Routes>
          <Route path="/products/:id" element={<ProductDetails />} />
          <Route path="/products" element={<Products sortBy="newest" />} />
          <Route path="/posts/:year?/:month?" element={<Posts />} />
          <Route path="/message" element={<Navigate replace to="/posts" />} />
          {/* 用/admin/*匹配所有/admin开头的子路径 */}
          <Route path="/admin/*" element={<Dashboard />} />
          <Route path="/" element={<Home />} />
          <Route path="/404" element={<NotFound />} />
          <Route path="*" element={<Navigate to="/404" replace />} />
        </Routes>
      </div>
    </div>
  );
}

export default App;

修改后的Dashboard.jsx

import React from "react";
import SideBar from "./sidebar";
import { Route, Routes } from "react-router-dom";
import Users from "./users";
import Posts from "./posts";

const Dashboard = () => {
  return (
    <div>
      <h1>Admin Dashboard</h1>
      <SideBar />

      <Routes>
        {/* 使用相对路径定义子路由 */}
        <Route path="users" element={<Users />} />
        <Route path="posts" element={<Posts />} />
      </Routes>
    </div>
  );
};

export default Dashboard;

说明 #

两种方式都能解决问题，推荐方式一，因为它更符合React Router v6的嵌套路由设计规范，路由结构更清晰，便于后续维护。

内容的提问来源于stack exchange，提问作者Iman Jalali