在React Router v6中如何向不同Outlet分发不同元素？

首先纠正一个误区：你理想代码中路由配置里的element: {main: <Home />}写法不符合React Router要求，element必须是React元素（JSX），不能是普通对象。下面是符合规范且简洁健壮的实现方式：

1. 编写基础双栏布局组件 #

先写好包含命名Outlet的Layout，它负责整体的网格结构，两个栏位分别对应side和main两个命名Outlet：

// Layout.tsx
import { Outlet } from 'react-router-dom';
import { Grid } from '@mui/material';

export default function Layout() {
  return (
    <Grid container spacing={2}>
      <Grid item xs={12} sm={2}>
        {/* 侧边栏Outlet，无内容时自动留空 */}
        <Outlet name="side" />
      </Grid>
      <Grid item xs={12} sm={10}>
        {/* 主内容Outlet */}
        <Outlet name="main" />
      </Grid>
    </Grid>
  );
}

2. 用嵌套路由统一订单流程侧边栏 #

通过嵌套路由把订单相关的页面归为一组，父路由负责向side Outlet注入统一的OrderSummary，子路由只需要提供主内容即可，无需重复配置侧边栏：

// Router.tsx
import { createBrowserRouter, Outlet } from 'react-router-dom';
import Layout from './Layout';
import Home from './Home';
import ChooseAddress from './ChooseAddress';
import ConfirmPayment from './ConfirmPayment';
import OrderSummary from './OrderSummary';

const router = createBrowserRouter([
  {
    path: '/',
    element: <Layout />,
    children: [
      // 首页：仅填充主内容，侧边栏留空
      {
        path: '',
        element: <Outlet name="main" element={<Home />} />,
      },
      // 订单流程父路由：统一配置侧边栏
      {
        element: (
          <>
            <Outlet name="side" element={<OrderSummary />} />
            <Outlet name="main" />
          </>
        ),
        children: [
          { path: 'address', element: <ChooseAddress /> },
          { path: 'payment', element: <ConfirmPayment /> },
          // 后续订单步骤直接在这里添加即可，自动继承侧边栏
        ],
      },
    ],
  },
]);

export default router;

方案优势 #

• 无重复代码：订单流程的所有子路由自动共享同一个侧边栏，不用在每个路由里重复编写侧边栏配置
• 布局逻辑集中：整体布局在Layout中维护，侧边栏的统一配置在父路由中，代码结构清晰
• 灵活性高：非订单路由可以自由控制侧边栏内容（留空或自定义组件），订单流程也可以随时调整父路由的侧边栏组件，所有子路由自动生效

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