useOutletContext钩子异常：时而正常时而报错致应用崩溃

可能的报错原因 #

1. 上下文数据初始状态异常：About组件异步计算数据时，初始渲染阶段向<Outlet />传递了undefined或null，而Saved组件直接对useOutletContext()的返回值做数组/对象解构，导致“不可迭代”报错。
2. 路由配置错误：Saved组件可能被配置为独立顶级路由，而非About组件的子路由，此时它不会通过About的<Outlet />渲染，useOutletContext()返回undefined，解构时触发报错。
3. 组件内未做空值处理：Posts和Likes组件可能对上下文数据做了空值判断，而Saved组件直接使用解构，未处理数据未加载完成的情况。

具体解决方案 #

1. 确保About组件传递的上下文始终为可迭代结构

在About组件中，给<Outlet />的context属性设置默认值，避免数据加载前传递undefined：

// About组件示例
import { useState, useEffect } from 'react';
import { Outlet } from 'react-router-dom';

const About = () => {
  const [computedData, setComputedData] = useState([]); // 初始值设为空数组/对象

  useEffect(() => {
    const computeData = async () => {
      const rawData = await fetchYourData();
      const processedData = calculate(rawData);
      setComputedData(processedData);
    };
    computeData();
  }, []);

  // 始终传递可迭代的结构
  return <Outlet context={computedData} />;
};

2. 在Saved组件中添加空值判断

避免直接解构未初始化的上下文数据：

// Saved组件示例
import { useOutletContext } from 'react-router-dom';

const Saved = () => {
  const outletContext = useOutletContext();
  
  // 先判断上下文是否有效，再解构
  if (!outletContext || !Array.isArray(outletContext)) {
    return <div>加载中...</div>;
  }

  const [targetData] = outletContext;
  // 后续渲染逻辑
  return <div>{targetData?.content}</div>;
};

3. 检查路由配置正确性

确保Saved是About的子路由，只能通过<Outlet />渲染：

// 路由配置示例
import { createBrowserRouter } from 'react-router-dom';
import About from './About';
import Posts from './Posts';
import Likes from './Likes';
import Saved from './Saved';

const router = createBrowserRouter([
  {
    path: '/about',
    element: <About />,
    children: [
      { path: 'posts', element: <Posts /> },
      { path: 'likes', element: <Likes /> },
      { path: 'saved', element: <Saved /> }, // 必须放在children下
    ],
  },
  // 禁止出现单独的/saved路由配置
]);

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