时间戳

首页 > 解决方案 > React Router Link 的动态参数不在 props.match 中

react-router - React Router Link 的动态参数不在 props.match 中

问题描述

我正在尝试建立一个小型博客网站。从帖子的详细页面导航到作者的个人资料时，我将用户的 ID 传递给链接。

<Link to={"/userPage/" + this.state.post.userId}>{this.state.post.userName}</Link>

路线如下所示：

<Route path="/userPage/:id" exact component={UserPage}/>

这一切都很好。但是，在我的导航栏中，我有一个“我的个人资料”链接，如下所示（登录用户的详细信息也存储在浏览器的本地存储中）：

<Link to={"/userPage/" + JSON.parse(localStorage.getItem('user')).id}>My Profile</button>

如果我当前在其他用户的个人资料页面上并且想要从导航栏导航到我自己的个人资料页面，浏览器的 url 栏会显示正确的链接（带有我的用户 ID），但是当我检查 this.props.match.params .id，它仍然有以前用户的 id，直到我第二次单击“我的个人资料”链接。谁能告诉我为什么会发生这种情况以及如何同步这些事件？谢谢。

标签： react-router

解决方案

我终于找到了解决方案，我使用过早的生命周期方法从道具中获取参数并更新页面（componentWillUpdate）。使用 componentDidUpdate 时，顾名思义，组件的详细信息已经更新，我可以获取新的 props（并相应地获取数据）。

推荐阅读