React Router中history.push传state，props.location.state报未定义求助

API 探路者

2026-5-14

解决react-router-dom跳转传state后无法获取props.location.state的问题

看起来你遇到的核心问题是react-router-dom v6 不再自动给路由组件传递location、history这类路由相关props了——你当前用的是v6的路由写法（<Route path="/edit"><PageEdit/></Route>这种element渲染方式），这种形式下组件不会自动收到路由上下文的props，所以props.location自然是undefined，进而导致访问state时报错。

直接有效的解决方案：使用`useLocation` Hook

这是v6官方推荐的获取路由location信息的方式，修改你的PageEdit.js即可解决问题：

import React from 'react';
import { useLocation } from "react-router-dom";

export default function PageEdit() {
  // 通过useLocation Hook获取location对象
  const location = useLocation();
  
  // 用可选链操作符避免直接访问state.id报错（比如用户直接刷新/edit页面时，state会不存在）
  const testId = location.state?.id;
  
  console.log("Meine ID:" + testId);
  
  return (
    <div>
      <h1>Edit Page</h1>
      {testId && <p>当前编辑的ID: {testId}</p>}
    </div>
  );
}

为什么你之前的尝试没效果？

useEffect无效：props.location本身就是undefined，不管在useEffect里还是外部访问，结果都一样，不存在加载时机的问题。
component写法无效：component={PageEdit}是react-router-dom v5的写法，v6已经废弃了component和render prop，必须使用element来渲染组件。
给Route加location属性无效：Route的location prop是用来覆盖当前路由的匹配location，不是用来传递给子组件的。
手动传递props无效：你的App组件本身并没有接收路由相关props（它在Router内部，但Router不会自动给App传递这些），所以{...props}是空对象，传递给PageEdit也拿不到location。