我正在使用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不会再次触发,因此不会刷新数据。我是否应该使用另一个生命周期事件来触发我的数据请求,或者使用其他策略来解决此问题?
如果链接仅通过不同的参数指向同一条路线,则它不是重新安装,而是接收新的道具。因此,您可以使用该componentWillReceiveProps(newProps)
函数并查找newProps.params.projectId
。
如果您要加载数据,我建议在路由器使用组件上的静态方法处理匹配之前获取数据。看看这个例子。反应路由器兆演示。这样,该组件将加载数据并在路由参数更改时自动更新,而无需依赖componentWillReceiveProps
。
我正在使用React-Router开发一个react应用程序。我有一个项目页面,其url如下: 当项目组件加载时,我从componentDidMount事件触发该项目的数据请求。我现在遇到了一个问题,如果我直接在两个项目之间切换,那么只有id像这样更改... componentDidMount不会再次触发,因此不会刷新数据。是否有另一个生命周期事件我应该用来触发我的数据请求或一个不同的策略来解决这
我知道这不是react router的默认行为/功能,可以帮助我们轻松地重新加载当前组件,但我真的需要在我的应用程序中使用它。 我的应用程序处理产品。我有一个可以加载的产品列表,当我单击某个项目时,它会显示相关的产品详细信息。 在该页面上,我有加载相同组件的相关产品链接,但有另一个产品详细信息,位于 我在我的组件willmount中获取数据,似乎如果我只更改URL,就不会装载新组件,因此,我总是显
在标记为副本之前,请仔细阅读此内容,我向您保证,我已经阅读并尝试了每个人在stackoverflow和github上提出的关于此问题的所有建议。 我在我的应用程序中有一条路线,如下所示; route rendering呈现打开用户角色的组件,并基于该角色惰性加载正确的Routes组件,Routes组件呈现主页的开关。简化后,如下所示。 然后是路由组件 因此,问题是每当用户从/导航到/秒等...应用
问题内容: 我有一个带有链接的“主页”组件,当您单击链接时,产品组件就会随产品一起加载。我还有另一个始终可见的组件,其中显示了“最近访问过的产品”的链接。 在产品页面上时,这些链接不起作用。当我单击链接时,URL会更新,并且会进行渲染,但是产品组件不会随新产品一起更新。 请参见以下示例: Codesandbox示例 以下是index.js中的路由: ProductHistory中的链接如下所示:
当按下{Link}并更改路由时,即使在react router dom的交换机组件之外,报头组件NavBar也会保持重新命名。 这里是文件: Main index.js文件: Home.js Contact.js 当前的项目非常简单:index.js文件包含Home和Contact组件,NavBar组件作为交换机外部的头。
问题内容: 我目前正在尝试弄清楚如何在不重新加载整个页面的情况下更改路由参数。例如,如果我从 http://www.example.com/#/page 但将名称更新为“乔治”,将路线更改为: http://www.example.com/#/page/george 如果我已经路由了http://www.example.com/#/page/:name。 无需重新加载位置。可以只设置$ route