React Router路由结构优化：侧边栏按需显示及空白页问题解决

核心思路是通过嵌套路由拆分布局：把需要侧边栏的页面（List、Detail）放在同一个父路由下，由父路由组件统一渲染SideBar和子路由内容；Authentication作为独立的顶级路由，不纳入这个布局体系。同时给/app路由添加默认子路由，解决访问时出现空白页的问题。

步骤1：创建带侧边栏的布局组件 #

先编写一个专门的布局组件（比如AppLayout），负责渲染SideBar和承载子路由内容的Outlet：

import { Outlet } from 'react-router-dom';
import SideBar from './SideBar';

const AppLayout = () => {
  return (
    <div style={{ display: 'flex' }}>
      <SideBar />
      <main style={{ flexGrow: 1, padding: '1rem' }}>
        <Outlet /> {/* 子路由的页面内容会在这里渲染 */}
      </main>
    </div>
  );
};

export default AppLayout;

步骤2：配置嵌套路由 #

将路由分为两类：无侧边栏的公开路由、带侧边栏的布局路由，同时给/app添加默认重定向逻辑：

用Routes组件的写法：

import { Routes, Route, Navigate } from 'react-router-dom';
import Authentication from './Authentication';
import AppLayout from './AppLayout';
import List from './List';
import Detail from './Detail';

function App() {
  return (
    <Routes>
      {/* 公开路由：Authentication页面，无侧边栏 */}
      <Route path="/auth" element={<Authentication />} />

      {/* 带侧边栏的布局路由容器 */}
      <Route path="/app" element={<AppLayout />}>
        {/* 默认子路由：访问/app时自动跳转到List，避免空白页 */}
        <Route index element={<Navigate to="list" replace />} />
        <Route path="list" element={<List />} />
        <Route path="detail/:id" element={<Detail />} />
      </Route>

      {/* 根路由重定向，可根据业务需求调整到/auth或/app/list */}
      <Route path="/" element={<Navigate to="/auth" replace />} />
    </Routes>
  );
}

export default App;

用createBrowserRouter的写法（React Router v6.4+推荐）：

import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import Authentication from './Authentication';
import AppLayout from './AppLayout';
import List from './List';
import Detail from './Detail';

const router = createBrowserRouter([
  {
    path: '/auth',
    element: <Authentication />,
  },
  {
    path: '/app',
    element: <AppLayout />,
    children: [
      { index: true, element: <Navigate to="list" replace /> },
      { path: 'list', element: <List /> },
      { path: 'detail/:id', element: <Detail /> },
    ],
  },
  { path: '/', element: <Navigate to="/auth" replace /> },
]);

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

export default App;

问题根源说明 #

• 最初的写法把SideBar放在了根组件中，导致所有路由页面都会渲染它；
• 后来用Outlet拆分但未给/app配置默认子路由，访问/app时Outlet没有内容，因此出现带侧边栏的空白页。添加index路由重定向到List即可解决。

额外权限控制提示 #

如果需要限制未登录用户访问/app下的页面，可以在AppLayout中加入登录状态校验：

import { Outlet, Navigate } from 'react-router-dom';
import SideBar from './SideBar';

const AppLayout = () => {
  const isLoggedIn = /* 替换为你的登录状态判断逻辑 */;
  
  if (!isLoggedIn) {
    return <Navigate to="/auth" replace />;
  }

  return (
    <div style={{ display: 'flex' }}>
      <SideBar />
      <main style={{ flexGrow: 1 }}>
        <Outlet />
      </main>
    </div>
  );
};

export default AppLayout;

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