React Router v6路由切换后组件不渲染问题求助

路由地址已切换，但对应组件无法渲染。首页的PrivateRoute可正常渲染一次，点击NavLink后浏览器地址变为"/agreements"，但AgreementsView组件未渲染。

相关代码 #

AppRoutes.tsx #

const PrivateRoute = ({ children }: { children?: any }) => {
  return <AuthorizedLayout>{children}</AuthorizedLayout>;
};

const router = createBrowserRouter(
  createRoutesFromElements(
    <React.Fragment>
      <Route path={routes.home.path} element={<PrivateRoute />}>
        <Route
          index
          path={routes.agreements.path}
          element={
            <PrivateRoute>
              <AgreementsView />
            </PrivateRoute>
          }
        ></Route>
        <Route
          path={routes.send.path}
          element={
            <PrivateRoute>
              <SendView />
            </PrivateRoute>
          }
        ></Route>
        <Route
          index
          path={routes.settings.path}
          element={
            <PrivateRoute>
              <SettingsView />
            </PrivateRoute>
          }
        ></Route>
      </Route>

      <Route
        path={routes.login.path}
        element={
          <UnauthorizedLayout>
            <LoginComponent />
          </UnauthorizedLayout>
        }
      ></Route>
    </React.Fragment>
  )
);

const AppRoutes = () => {
  return <RouterProvider router={router} />;
};

App.tsx #

import AppRoutes from "./routes.component";
import { ThemeProvider } from "./shared/theme";

function App() {
  return (
    <ThemeProvider>
      <AppRoutes />
    </ThemeProvider>
  );
}

export default App;

问题分析与修复 #

你的路由配置存在两个关键问题：

1. 父路由未渲染Outlet
   React Router v6中，嵌套路由的父组件必须通过<Outlet />渲染子路由内容。当前PrivateRoute组件只返回AuthorizedLayout和children，没有Outlet，导致子路由的组件无法被挂载。

2. 子路由配置错误

• 多个子路由设置了index属性：index路由是父路由的默认子路由，只能存在一个，多个index会导致路由匹配逻辑混乱。
• 子路由重复包裹PrivateRoute：父路由已经用PrivateRoute作为布局，子路由会自动继承该布局，重复包裹完全冗余，还可能干扰渲染流程。

修复步骤 #

1. 更新PrivateRoute组件

添加Outlet支持，让它既能渲染传入的children，也能承载子路由：

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

const PrivateRoute = ({ children }: { children?: any }) => {
  return <AuthorizedLayout>{children || <Outlet />}</AuthorizedLayout>;
};

2. 修正路由配置

移除重复的PrivateRoute和多余的index属性：

const router = createBrowserRouter(
  createRoutesFromElements(
    <React.Fragment>
      <Route path={routes.home.path} element={<PrivateRoute />}>
        {/* 设置一个index路由作为父路径的默认页面 */}
        <Route index element={<AgreementsView />} />
        {/* 其他子路由移除index和外层PrivateRoute */}
        <Route path={routes.agreements.path} element={<AgreementsView />} />
        <Route path={routes.send.path} element={<SendView />} />
        <Route path={routes.settings.path} element={<SettingsView />} />
      </Route>

      <Route
        path={routes.login.path}
        element={
          <UnauthorizedLayout>
            <LoginComponent />
          </UnauthorizedLayout>
        }
      ></Route>
    </React.Fragment>
  )
);

额外注意点 #

• 确认routes.home.path为根路径（如"/"），这样子路由的路径会自动拼接成完整地址（比如routes.agreements.path设为"agreements"时，完整路径是"/agreements"）。
• NavLink的to属性要与路由配置的path完全匹配，确保跳转逻辑正确。

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