React-Router v6参数传递报错：无法读取路由参数与state

获取路由参数（specFileName 和 runId） #

在react-router-dom v6中，路由参数需要通过useParams钩子获取，而非直接从location对象读取：

1. 从react-router-dom导入useParams
2. 解构路由配置中定义的specFileName和runId参数

获取传递的State参数 #

通过Link传递的state数据会存储在useLocation返回的location.state对象中，直接访问即可。

修正后的SpecFile组件代码 #

import { useLocation, useParams } from "react-router-dom";

export default function SpecFile() {
  // 获取路由参数
  const { runId, specFileName } = useParams();
  // 获取state参数，添加空值判断避免无state时报错
  const location = useLocation();
  const { testcases } = location.state || {};

  // 验证参数
  console.log("specFileName:", specFileName); // 输出预期的"Login"
  console.log("runId:", runId); // 输出"2"
  console.log("testcases:", testcases); // 输出传递的测试用例数据

  return (
    <div>
      <p>Spec文件名称：{specFileName}</p>
      <p>运行ID：{runId}</p>
    </div>
  );
}

关键说明 #

• 你之前的错误是试图访问location.specFile.name，该属性在location对象中不存在，路由参数必须通过useParams获取
• 访问location.state时建议添加空值判断，防止跳转未传递state导致的报错

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