React Router访问/users/add时渲染空白页，嵌套路由问题求助

嗨，我完全理解你在新版React Router里折腾嵌套路由时的困惑！访问/users/add时出现空白页，基本是踩了嵌套路由的两个核心小坑——父组件没放<Outlet />或者路由配置结构不对，我来一步步帮你搞定：

问题根源 #

新版React Router（v6+）的嵌套路由逻辑很明确：子路由的组件需要依赖父路由组件里的<Outlet />来渲染。如果父组件里没这个出口，React Router就不知道把子组件放在哪儿，自然就显示空白了。

正确的配置步骤 #

1. 路由配置的正确结构 #

首先，在路由定义时，要把/users/add作为/users的子路由放在children数组里，注意子路由的path是相对路径（不用加/users前缀）：

import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import Home from './Home';
import Users from './Users';
import AddUser from './AddUser';

const router = createBrowserRouter([
  {
    path: '/',
    element: <Home />,
  },
  {
    path: '/users',
    element: <Users />,
    // 嵌套子路由写在这里
    children: [
      {
        path: 'add', // 相对路径，等价于/users/add
        element: <AddUser />,
      },
    ],
  },
]);

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

export default App;

2. 父组件添加<Outlet />出口 #

在Users组件里，必须引入并添加<Outlet />，它就是子路由组件的“渲染容器”：

import { Outlet, Link } from 'react-router-dom';

function Users() {
  return (
    <div className="users-page">
      <h1>用户列表页</h1>
      {/* 用相对路径跳转子路由 */}
      <Link to="add">点击添加新用户</Link>
      
      {/* 子路由的AddUser组件会渲染在这里 */}
      <Outlet />
    </div>
  );
}

export default Users;

为什么绝对路由能行，但嵌套更推荐？ #

你提到直接写/users和/users/add这类绝对路由也能正常显示，但嵌套路由的优势在于可以复用父组件的布局——比如如果Users页面有侧边栏、顶部导航，嵌套路由下AddUser会自动继承这些布局，不用重复写代码。

按上面的配置改完后，访问/users/add时，就会在Users组件的<Outlet />位置渲染出AddUser组件，不会再出现空白啦！

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