Javascript history.push（）和props.location.state cause“；无法读取属性'；州'；“未定义”的定义； 问题描述

我将react路由器dom与react功能组件一起使用。我正在尝试使用“history.push”传递数据，但它不起作用

重定向到另一个带有“history.push”的页面本身效果很好但问题是：通过“状态：{…}”向组件传递数据会导致： “无法读取未定义的属性“状态” 当我尝试使用组件中的“props.location.state”访问它时

我尝试过不同的路线定义

代码 app.js

从“React”导入React；
从“./pages/PageList”导入页面列表；
从“./pages/PageEdit”导入页面编辑；
从“react Router dom”导入{BrowserRouter as Router，Route，Switch}；
导出默认函数App（）{
返回(
 
);
}

PageList.js

从“React”导入React；
从“react router dom”导入{useHistory}；
从“@material ui/core/Button”导入按钮；
导出默认函数PageList（）{
让历史=使用历史（）；
功能HandleteTclick（e）{
历史推送({
路径名：“/edit”，
状态：{id:123}
});
}
返回(
试验
);
}

PageEdit.js

import React，{useffect}来自“React”；
导出默认功能页面编辑（道具）{
常量测试=props.location.state；
console.log（“Meine ID:+test.ID”）；
返回(
编辑页面
);
}

我尝试的是：

要使用useEffect（）避免重新加载页面时出现任何问题，请执行以下操作：

useffect（（）=>{
常量测试=props.location.state；
console.log（“Meine ID:+test.ID”）；
}, []);

路线的其他类型定义

添加位置道具：

将道具传递给组件（即使React Router应自动包含道具）：

没用

我希望console.log（…）的输出是通过history.push传递的数据。考虑到react路由器的文档应该以这种方式工作

有人能帮忙吗？

根据说明，您没有正确使用它

它应该是：

/>

或

/>

这样，根据您未正确使用的情况，您将正确使用来自react router的

道具

它应该是：

/>

或

/>

这样，您就可以正确地使用来自
react router
url参数的
props
您应该定义URL以接受id



因此，通过这种方式，您可以重定向到正确的位置，甚至可以复制过去的URL以与其中的页面id共享

在
组件中，可以使用
let{id}=useParams（）访问id然后从页面列表中加载它

组件之间的共享状态
一个更复杂的解决方案是在所有组件之间采用共享状态，这就是设计的目的。
url参数
您应该定义URL以接受id



因此，通过这种方式，您可以重定向到正确的位置，甚至可以复制过去的URL以与其中的页面id共享

在
组件中，可以使用
let{id}=useParams（）访问id然后从页面列表中加载它

组件之间的共享状态
更复杂的解决方案可能是在所有组件之间采用共享状态，这就是设计的目的。
在PageEdit.js上

您应该使用useLocation（）访问状态

您将能够访问PageEdit.js上的数据

您应该使用useLocation（）访问状态

您将能够访问您的数据
如果此评论是由于OP代码中的行引起的，那么您实际上是不正确的。最近引入了这种样式，因此我们可以将钩子与dom一起使用。你可以参考官方的博客来了解更多的细节，这确实值得一提。但是我的回答是基于这样一个事实，OP混合了这两种语法，没有提到
useLocation
hook，这让我觉得他是在使用“pre-hook”语法。@MiDas：谢谢你的建议。但这不正是我在“我尝试过的”第2条下写的吗（除了我猜是打字错误的额外“>”。@MiDas：实际上我是在尝试使用“钩子语法”。由于我是新的反应，可能我没有一直使用它？解决了！非常感谢大家。我刚刚尝试了“useLocation挂钩”，现在它工作得很好！如果此注释是因为OP代码中的行，那么您实际上是不正确的。最近引入了这种样式，因此我们可以将钩子与dom一起使用。你可以参考官方的博客来了解更多的细节，这确实值得一提。但是我的回答是基于这样一个事实，OP混合了这两种语法，没有提到
useLocation
hook，这让我觉得他是在使用“pre-hook”语法。@MiDas：谢谢你的建议。但这不正是我在“我尝试过的”第2条下写的吗（除了我猜是打字错误的额外“>”。@MiDas：实际上我是在尝试使用“钩子语法”。由于我是新的反应，可能我没有一直使用它？解决了！非常感谢大家。我刚刚尝试了“useLocation挂钩”，现在它工作得很好！非常感谢您的回答！我知道使用URL对我来说可能是一个解决方案。但是我不打算使用URL来传递ID，而是使用location.state。根据文档，这也应该有效。非常感谢您的回答！我知道使用URL对我来说可能是一个解决方案。但是我不打算使用URL来传递ID，而是使用location.state。这是
<Route path="/edit/:id" component={PageEdit} />

import {useLocation} from 'react-router-dom'
const location = useLocation() 
console.log(location.state)