React Router Dom v6嵌套路由布局异常：动态组件未与固定组件并排

你的问题出在布局结构上：当前<Component1>所在的容器和<Outlet>是两个独立的块级元素，默认会垂直堆叠。要让左侧动态组件（Outlet渲染内容）和右侧固定的Component1并排显示，需要将两者放入同一个flex容器中。

修改AllComponents组件的代码如下：

import React from 'react'
import Component1 from './Component1'
import { Outlet } from 'react-router-dom'

function AllComponents() {
  return (
    <>
      <div style={{ display: 'flex', justifyContent: 'center' }}>
        <h1>Parent Component</h1>
      </div>

      {/* 外层flex容器实现左右布局 */}
      <div style={{ display: 'flex', width: '100%' }}>
        {/* 左侧动态组件：占据剩余空间 */}
        <div style={{ flex: 1 }}>
          <Outlet />
        </div>

        {/* 右侧固定组件 */}
        <div>
          <Component1 />
        </div>
      </div>
    </>
  )
}

export default AllComponents

关键修改说明： #

• 将<Outlet>和<Component1>包裹在同一个display: flex的容器内，强制两者在同一水平行排列。
• 给Outlet所在容器添加flex: 1，使其自动占据容器内除Component1之外的所有剩余空间，保证布局分配合理。
• 移除原Component1容器上的justifyContent: 'flex-end'，外层flex容器已能控制右侧组件的位置。

修改完成后，左侧动态渲染的组件会和右侧固定的Component1并排显示，不再出现上下堆叠的情况。

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