React Router v6嵌套路由场景下如何向<Outlet />传递props？

return (<Outlet />)

React Router v6 不支持直接给<Outlet />绑定自定义props传递给子路由，官方提供了专门的API处理这个需求，也可以通过自定义Context实现，两种方案都不需要依赖URL参数。

方案1：使用原生useOutletContext（优先推荐） #

这是官方针对嵌套路由传值设计的原生API，代码量最少，仅作用于当前嵌套路由层级，不会产生额外的全局污染。

父组件修改代码 #

将需要传递的参数绑定到<Outlet />的context属性上，支持传递任意类型的值，包括状态、方法：

// 父组件代码
import { useState } from 'react';
import { Outlet } from 'react-router-dom';

function ParentComp() {
  const [format, setFormat] = useState('rgb');
  const color = [hex, rgb, rgba];

  // ... 其他逻辑

  return (
    <>
      <PaletteNavBar changeFormat={setFormat}/>
      {colorId ? (
        <ColorBoxes />
      ) : (
        // 所有要传递给子路由的内容都放到context属性中
        <Outlet context={{ 
          color: color[format],
          setFormat // 也可以直接传递修改父状态的方法
        }} />
      )}
      <PaletteFooter />
    </>
  )
}

子路由组件取值 #

在嵌套路由匹配的子组件中，调用useOutletContext Hook即可拿到父组件传递的所有值：

// 嵌套路由对应的子组件
import { useOutletContext } from 'react-router-dom';

function ChildRouteComp() {
  // 直接解构获取父组件传入的context
  const { color, setFormat } = useOutletContext();

  // 可以直接使用color，也可以调用setFormat修改父组件的format状态
  return <div>当前格式的颜色值：{color}</div>
}

方案2：自定义React Context（适合跨多层嵌套路由传值） #

如果你需要将值传递给多层嵌套的子路由，或者多个平级嵌套路由都需要访问同一个状态，可以自定义Context封装：

1. 定义Context #

// palette-context.js
import { createContext, useContext } from 'react';

const PaletteContext = createContext();

// 封装Provider和自定义Hook，简化调用
export function PaletteProvider({ children, value }) {
  return (
    <PaletteContext.Provider value={value}>
      {children}
    </PaletteContext.Provider>
  )
}

export function usePaletteContext() {
  return useContext(PaletteContext);
}

2. 父组件包裹Outlet #

// 父组件代码
import { PaletteProvider } from './palette-context';

function ParentComp() {
  const [format, setFormat] = useState('rgb');
  const color = [hex, rgb, rgba];
  const contextValue = { color: color[format], setFormat };

  return (
    <>
      <PaletteNavBar changeFormat={setFormat}/>
      {colorId ? (
        <ColorBoxes />
      ) : (
        <PaletteProvider value={contextValue}>
          <Outlet />
        </PaletteProvider>
      )}
      <PaletteFooter />
    </>
  )
}

3. 任意层级子组件取值 #

// 任意子/孙嵌套路由组件
import { usePaletteContext } from './palette-context';

function DeepChildComp() {
  const { color, setFormat } = usePaletteContext();
  // 业务逻辑处理
}

方案选择建议 #

• 仅需父子层级嵌套路由传值：优先选useOutletContext，无需额外封装，代码更简洁
• 需要跨多层嵌套路由传值、或者多个路由共享状态：选择自定义Context方案

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