如何在react-router-dom v6的Outlet Context中传递多个上下文？

嘿，这当然是可行的！你之前的问题出在**多次调用useOutletContext()**上——这个钩子每次调用都会返回你通过<Outlet context={...}>传递的完整上下文对象，所以你两次调用拿到的其实是同一个对象，自然没法正确解构出两组状态和方法。

正确的实现方式 #

我们只需要在子组件中一次获取完整的上下文对象，然后解构出需要的属性就可以了。

父路由文件（layout.js）

保持你传递对象的写法就行，把多个状态分组放在上下文对象里：

export default function Layout() {
  const [darkMode, setDarkMode] = useState(false);
  const [color, setColor] = useState("#fff");
  
  return (
    <>
      {/* Header */}
      {/* Content */}
      <Outlet 
        context={{ 
          darkMode: [darkMode, setDarkMode], 
          color: [color, setColor] 
        }} 
      />
      {/* Footer */}
    </>
  )
}

子路由文件（login.js）

只调用一次useOutletContext()，然后从返回的对象中解构出darkMode和color，再进一步解构它们的状态和方法：

export default function Login() {
  const { darkMode, color } = useOutletContext();
  const [darkModeValue, setDarkModeValue] = darkMode;
  const [colorValue, setColorValue] = color;
  
  return (
    {/* 这里可以使用darkModeValue、setDarkModeValue、colorValue、setColorValue */}
    <div>
      <p>当前主题模式：{darkModeValue ? "深色" : "浅色"}</p>
      <p>当前颜色：{colorValue}</p>
    </div>
  )
}

或者你也可以在解构的时候一步到位，写法更简洁：

export default function Login() {
  const { 
    darkMode: [darkModeValue, setDarkModeValue],
    color: [colorValue, setColorValue]
  } = useOutletContext();
  
  return (
    {/* 你的组件代码 */}
  )
}

关键要点 #

• useOutletContext()是一个单次调用获取全部上下文的钩子，不要多次调用它。
• 你可以通过对象、数组等任意格式传递上下文，只要在子组件中正确解构对应的数据结构即可。
• 如果需要传递的属性很多，建议把上下文封装成一个清晰的对象，这样代码可读性更高，也更容易维护。

内容的提问来源于stack exchange，提问作者Mustafa Özkan