如何用React Router v6在同一页面并排渲染子路由实现三栏布局？

你的问题核心是路由层级未正确嵌套，导致内栏与主内容互相替换。要实现侧边栏始终显示、内栏在进入/:state/:building后常驻、主内容在详情页叠加显示的三栏布局，需要调整路由嵌套结构并让内栏组件承载自身的Outlet。

步骤1：重构路由嵌套关系 #

将详情路由设为内栏路由的子路由，让内栏作为父容器，主内容作为它的子节点渲染：

const router = createBrowserRouter(createRoutesFromElements(
  <>
    <Route path='/login' element={<Login/>}/>
    <Route path='/register' element={<Register/>} errorElement={<Error/>}/>
    <Route path='/reset-password' element={<ResetPassword/>} />
    <Route element={<AuthWrapper/>}>
      <Route path='/' element={<Portal/>} loader={portalLoader}>
        {/* 内栏作为父路由，承载自身的Outlet */}
        <Route path='/:state/:building' element={<Innerbar/>} loader={innerbarLoader}>
          {/* 详情路由作为内栏的子路由，复用上层路径参数 */}
          <Route path=':clientId/details' element={<MainContent/>} loader={MainContentLoader}/>
        </Route>
      </Route>
    </Route>
    <Route path='*' element={<div>This route does not exist 404</div>}/>
  </>
))

步骤2：修改Innerbar组件，添加Outlet #

在Innerbar内部加入Outlet，用来渲染主内容组件。这样访问详情页时，内栏不会被替换，而是与主内容并排展示：

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

function Innerbar() {
  // 保留原Innerbar的业务逻辑与UI代码

  return (
    <div style={{ display: 'flex', flex: 1, gap: '16px' }}>
      {/* 内栏自身的内容区域 */}
      <div className="innerbar-container">
        {/* 你的内栏UI元素 */}
      </div>
      {/* 主内容的渲染出口 */}
      <Outlet />
    </div>
  );
}

步骤3：确认Portal组件的布局逻辑 #

Portal组件中的Stack已包含侧边栏和Outlet，此时这个Outlet会渲染Innerbar组件（带它自己的Outlet），最终形成稳定的三栏结构：

• 左侧：Portal内置的Sidebar
• 中间：Innerbar的内容区域
• 右侧：MainContent（通过Innerbar的Outlet渲染）

调整完成后，访问/:state/:building时显示侧边栏+内栏；访问/:state/:building/:clientId/details时，侧边栏与内栏保留，同时加载主内容，实现三栏共存的预期效果。

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