React中不渲染父组件时子组件获取路由传递数据的问题

嘿，这个场景我太熟了！咱们先拆解下问题根源，再一步步解决：

为什么会出现初始null+直接访问无数据的情况？ #

你遇到的父组件render两次（先null后有效数据），大概率是因为父组件的数据是异步加载的（比如从API、后端接口或者状态管理库中获取）——组件初始化时state是null，异步请求完成后才更新数据，所以会触发两次渲染。而直接访问子组件时，要么父组件还没完成数据加载就渲染了子组件，要么路由跳转时的传参（比如state）根本没被带上，自然拿不到有效数据。

针对性解决方案，分两种传参场景： #

场景1：你是通过<Route>的element直接传递props给子组件

比如父组件里写的是：

<Route path="/child" element={<Child data={parentData} />} />

这种情况下，直接访问子组件时，父组件的parentData还处于初始的null状态，所以子组件拿到的就是null。解决办法：

• 条件渲染路由/子组件：在父组件里确保数据加载完成后，再渲染子组件的路由：

  // 父组件示例
  import { useState, useEffect } from 'react';
  import { Routes, Route, Link } from 'react-router-dom';
  import Child from './Child';
  
  function Parent() {
    const [parentData, setParentData] = useState(null);
  
    useEffect(() => {
      // 模拟异步获取数据
      fetch('/api/your-data')
        .then(res => res.json())
        .then(setParentData);
    }, []);
  
    return (
      <div>
        <Link to="/child">跳转到子组件</Link>
        <Routes>
          {/* 只有数据存在时，才渲染带有效数据的子组件路由 */}
          {parentData ? (
            <Route path="/child" element={<Child data={parentData} />} />
          ) : (
            {/* 数据未加载时，给直接访问的用户提示或重定向 */}
            <Route path="/child" element={<div>请先从父页面进入，或数据加载中...</div>} />
          )}
        </Routes>
      </div>
    );
  }
  

• 让子组件自主获取数据：如果数据可以通过唯一标识（比如ID）获取，不如把ID放在URL参数里，子组件自己根据ID请求数据——这样不管怎么访问子组件，都能拿到数据：

  // 父组件跳转时带ID到URL
  <Link to={`/child/${parentData.id}`}>跳转到子组件</Link>
  
  // 子组件通过useParams获取ID并请求数据
  import { useState, useEffect } from 'react';
  import { useParams } from 'react-router-dom';
  
  function Child() {
    const { dataId } = useParams();
    const [data, setData] = useState(null);
  
    useEffect(() => {
      if (dataId) {
        fetch(`/api/your-data/${dataId}`)
          .then(res => res.json())
          .then(setData);
      }
    }, [dataId]);
  
    if (!data) return <div>加载中...</div>;
  
    return <div>拿到的数据：{JSON.stringify(data)}</div>;
  }
  

场景2：你是通过路由跳转的state传参（比如history.push）

比如父组件里是这样跳转的：

history.push({ pathname: '/child', state: { data: parentData } });

这种情况下，直接访问子组件时location.state会是undefined——因为直接访问没有触发跳转动作，state不会被携带。解决办法：

• 用全局状态存数据：把数据放到Context、Redux这类全局状态容器里，子组件直接从全局状态读取，不管怎么访问都能拿到数据（前提是全局状态已经加载完成）。
• 把关键数据放到URL参数：和上面场景的思路一样，把非敏感、可序列化的数据放到URL里，子组件通过useParams获取后自行请求。
• 重定向兜底：如果必须从父组件进入，子组件可以判断没有数据时重定向到父组件：

  import { useLocation, Navigate } from 'react-router-dom';
  
  function Child() {
    const location = useLocation();
    const data = location.state?.data;
  
    if (!data) {
      return <Navigate to="/parent" />;
    }
  
    return <div>拿到的数据：{JSON.stringify(data)}</div>;
  }
  

额外提示：处理父组件两次render的问题 #

父组件初始render出null是正常的（因为异步数据还没到），你可以在父组件里加个loading状态，给用户反馈，同时避免子组件拿到null时出错：

const [parentData, setParentData] = useState(null);
const [isLoading, setIsLoading] = useState(true);

useEffect(() => {
  fetch('/api/your-data')
    .then(res => res.json())
    .then(data => {
      setParentData(data);
      setIsLoading(false);
    });
}, []);

// 渲染时显示loading
if (isLoading) return <div>父组件加载中...</div>;

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