React-Router-Dom(TypeScript)中location.state属性取值返回undefined问题

react-router-dom v5的history.push方法参数规则为：第一个参数是目标路径，第二个参数直接就是要传递的state数据，不需要额外包裹一层state字段。你当前在Home.tsx里传递参数时多套了一层state结构，导致实际拿到的数据结构和预期不符：
你传递参数后，Edit组件内useLocation()返回的state实际结构是：

{
  state: { test: 5 }
}

所以直接访问state.test自然返回undefined，只有访问state.state.test才能拿到值，属于传参逻辑和定义不匹配的问题。

两种方案任选其一即可，推荐第一种符合官方规范的方案：

方案1：修改Home组件的传参逻辑（推荐） #

直接把要传递的参数作为history.push的第二个参数，去掉外层多余的state包裹：

// Home.tsx 修正后的handleEdit方法
const handleEdit = (data: Route) => {
    history.push("/edit", {
      test: 5
    });
  };

修改后Edit组件内的state.test就能正常返回5，和你定义的Route接口完全匹配。

方案2：适配现有传参逻辑修改取值规则（不推荐） #

如果不想调整传参逻辑，就同步修改类型定义和取值方式：
首先调整interface.ts：

export interface Route {
  state: {
    test: Number;
  }
}

然后Edit组件内取值改为：

console.log("asdf", state.state.test);

建议访问state属性时添加可选链防护，避免用户直接访问/edit路由没有传递参数时，state为null导致的报错：

console.log("asdf", state?.test);

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