当前位置: 首页 > 知识库问答 >
问题:

当路由参数更改时,组件不会重新挂载

孟新知
2023-03-14

我正在使用React-Router开发一个react应用程序。我有一个项目页面,其url如下:

myapplication.com/project/unique-project-id

当项目组件加载时,我从componentDidMount事件触发该项目的数据请求。我现在遇到了一个问题,如果我直接在两个项目之间切换,那么只有id像这样更改...

myapplication.com/project/982378632
myapplication.com/project/782387223
myapplication.com/project/198731289

componentDidMount不会再次触发,因此不会刷新数据。是否有另一个生命周期事件我应该用来触发我的数据请求或一个不同的策略来解决这个问题?

共有1个答案

麹凯捷
2023-03-14

如果链接指向相同的路由,只是不同的参数,它不会重新挂载,而是接收新的道具。因此,您可以使用ComponentWillReceiveProps(newProps)函数并查找newProps.params.projectID

如果您正在尝试加载数据,我建议您在路由器使用组件上的静态方法处理匹配之前获取数据。请查看此示例。React路由器Mega演示。这样,组件将加载数据并在路由参数更改时自动更新,而不需要依赖componentwillreceiveprops

 类似资料:
  • 问题内容: 我正在使用react-router开发一个React应用程序。我有一个项目页面,其URL如下: 当项目组件加载时,我从componentDidMount事件触发了对该项目的数据请求。我现在遇到一个问题,如果我直接在两个项目之间切换,那么只有id会这样改变… componentDidMount不会再次触发,因此不会刷新数据。我是否应该使用另一个生命周期事件来触发我的数据请求,或者使用其他

  • 我知道这不是react router的默认行为/功能,可以帮助我们轻松地重新加载当前组件,但我真的需要在我的应用程序中使用它。 我的应用程序处理产品。我有一个可以加载的产品列表,当我单击某个项目时,它会显示相关的产品详细信息。 在该页面上,我有加载相同组件的相关产品链接,但有另一个产品详细信息,位于 我在我的组件willmount中获取数据,似乎如果我只更改URL,就不会装载新组件,因此,我总是显

  • 在标记为副本之前,请仔细阅读此内容,我向您保证,我已经阅读并尝试了每个人在stackoverflow和github上提出的关于此问题的所有建议。 我在我的应用程序中有一条路线,如下所示; route rendering呈现打开用户角色的组件,并基于该角色惰性加载正确的Routes组件,Routes组件呈现主页的开关。简化后,如下所示。 然后是路由组件 因此,问题是每当用户从/导航到/秒等...应用

  • 问题内容: 我有一个带有链接的“主页”组件,当您单击链接时,产品组件就会随产品一起加载。我还有另一个始终可见的组件,其中显示了“最近访问过的产品”的链接。 在产品页面上时,这些链接不起作用。当我单击链接时,URL会更新,并且会进行渲染,但是产品组件不会随新产品一起更新。 请参见以下示例: Codesandbox示例 以下是index.js中的路由: ProductHistory中的链接如下所示:

  • 我有一个基于url的react组件,它应该导入一些数据,然后在另一个子组件中显示。当页面首次加载时,它将初始数据作为组件状态加载到中。至于进一步的url更改,它们将在export default class Info()中处理。组成部分{ 我的问题是,尽管switch语句中有状态更新,但组件不会重新渲染。我不知道我的方法有什么问题。有人能帮我吗?谢谢 编辑:这是使用而不是的代码:

  • 当按下{Link}并更改路由时,即使在react router dom的交换机组件之外,报头组件NavBar也会保持重新命名。 这里是文件: Main index.js文件: Home.js Contact.js 当前的项目非常简单:index.js文件包含Home和Contact组件,NavBar组件作为交换机外部的头。