React父子组件传值异常：props值未定义问题求助

1. 检查路由跳转时的参数传递方式 #

React Router v6 中，navigate 方法不能直接将参数作为第二个参数传递，需要放在 state 对象中：

// Home.js 中提交表单的跳转逻辑
const handleSubmit = () => {
  // 正确写法：将参数存入 state
  navigate('/quiz', { 
    state: { numQuestions, category } 
  });
};

2. 子组件正确接收路由参数 #

通过路由跳转的组件无法直接通过 props 获取参数，需使用 useLocation 钩子读取 state：

// Quiz.js 中接收参数
import { useLocation, useEffect } from 'react-router-dom';

function Quiz() {
  const location = useLocation();
  // 加默认值避免解构空对象报错
  const { numQuestions, category } = location.state || {};

  useEffect(() => {
    console.log(numQuestions, category);
  }, [numQuestions, category]);

  return (
    <div>
      题目数量：{numQuestions}
      分类：{category}
    </div>
  );
}

3. 动态路由参数方案（适合需要URL可见参数的场景） #

如果希望参数显示在URL中，可配置动态路由：

// 路由配置文件
<Routes>
  <Route path="/" element={<Home />} />
  {/* 定义动态参数 */}
  <Route path="/quiz/:numQuestions/:category" element={<Quiz />} />
</Routes>

父组件跳转时拼接路径：

navigate(`/quiz/${numQuestions}/${category}`);

子组件用 useParams 接收：

import { useParams, useEffect } from 'react-router-dom';

function Quiz() {
  const { numQuestions, category } = useParams();
  // 动态参数是字符串类型，需转数字
  const parsedNum = parseInt(numQuestions, 10);

  useEffect(() => {
    console.log(parsedNum, category);
  }, [parsedNum, category]);

  return (
    <div>
      题目数量：{parsedNum}
      分类：{category}
    </div>
  );
}

4. 解决刷新页面参数丢失问题 #

state 存储在内存中，刷新页面会丢失参数。如需持久化，可使用本地存储：

// Home.js 提交时存储参数
const handleSubmit = () => {
  localStorage.setItem('quizParams', JSON.stringify({ numQuestions, category }));
  navigate('/quiz');
};

// Quiz.js 读取参数
useEffect(() => {
  const params = JSON.parse(localStorage.getItem('quizParams'));
  if (params) {
    console.log(params.numQuestions, params.category);
    // 可存入组件state使用
    // setNumQuestions(params.numQuestions);
    // setCategory(params.category);
    localStorage.removeItem('quizParams'); // 用完清除
  }
}, []);

排查关键点 #

• 确认路由配置中已正确注册 Quiz 组件
• 检查子组件是否误用普通 props 接收路由参数
• 验证父组件跳转时参数是否已正确传入 state 或动态路径

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