react-router-dom嵌套路由显示空白页面问题求助

我尝试实现/user/info这样的URL路径，但访问该路径时页面显示空白，附上我的代码，求技术支持。

路由配置 #

import React from "react";
import { AppLayout } from "ui";
import { AppRoute } from "types";
import Dashboard from "pages/dashboard/index";
import InfoScreen from "pages/vendor/dashboard";

const routes: AppRoute[] = [
  {
    path: "/user",
    component: Dashboard,
    exact: true,
    layout: AppLayout,
    indexRoute: true,
    children: [
      {
        path: "/info",
        component: InfoScreen,
        exact: false,
        layout: AppLayout,
        indexRoute: false,
        children: [],
      },
    ],
  },
];

export default routes;

路由渲染代码 #

const Wrapper: React.FC = () => {
  return <Outlet />;
};

<StylesProvider>
        <Router>
          <div className="app bg-body">
            <OktaProvider>
              <AuthProvider>
                <Provider store={store}>
                  <Routes>
                    {routes.map((route, index) => {
                      return (
                        <Route
                          key={index}
                          path={route.path}
                          element={
                            route.layout ? (
                              <route.layout appName="Envio" />
                            ) : (
                              <Wrapper />
                            )
                          }
                        >
                          <Route
                            key={index}
                            path={route.path}
                            index={route.indexRoute ? true : undefined}
                            element={<route.component />}
                          />
                          {route.children?.map((child, index) => (
                            <Route
                              key={index}
                              path={child.path}
                              index={route.indexRoute ? true : undefined}
                              element={<child.component />}
                            />
                          ))}
                        </Route>
                      );
                    })}
    
                  </Routes>
                </Provider>
              </AuthProvider>
            </OktaProvider>
          </div>
        </Router>
      </StylesProvider>

问题分析与解决方法 #

1. 子路由路径错误 #

子路由的path写成了/info（绝对路径），这会让路由直接匹配/info而不是/user/info。把子路由的path改成info（相对路径）：

children: [
  {
    path: "info", // 去掉开头的斜杠
    component: InfoScreen,
    exact: false,
    layout: AppLayout,
    indexRoute: false,
    children: [],
  },
],

2. 父路由的exact: true阻碍子路由匹配 #

父路由设置了exact: true，意味着只有当路径完全等于/user时才会匹配，访问/user/info时父路由不会被匹配，导致子路由无法渲染。移除父路由的exact属性：

{
  path: "/user",
  component: Dashboard,
  // 去掉 exact: true
  layout: AppLayout,
  indexRoute: true,
  children: [...],
},

3. 子路由的index属性配置错误 #

渲染子路由时，错误地使用了父路由的route.indexRoute，应该使用子路由自身的child.indexRoute：

{route.children?.map((child, index) => (
  <Route
    key={index}
    path={child.path}
    index={child.indexRoute} // 改为子路由自身的indexRoute
    element={<child.component />}
  />
))}

4. 确保父布局组件包含<Outlet /> #

AppLayout组件内部必须包含<Outlet />，否则子路由的内容没有渲染出口，页面会空白。检查AppLayout的代码，确保它渲染了<Outlet />：

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

const AppLayout = ({ appName }) => {
  return (
    <div>
      {/* 其他布局内容 */}
      <Outlet /> {/* 子路由内容会渲染在这里 */}
    </div>
  );
};

完成以上修改后，访问/user/info应该就能正常渲染InfoScreen组件了。

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