[react-router] React-Router 4怎样在路由变化时重新渲染同一个组件？

前端小歌谣

于 2021-11-26 06:00:00 发布

阅读量1.3k

点赞数

分类专栏： # 前端面试题react-router 文章标签： react.js 前端 reactjs

本文链接：https://blog.csdn.net/weixin_43392489/article/details/121541261

版权

本文探讨了在React-Router 4中如何在路由变化时重新渲染同一个组件，包括通过设置不同key和利用componentWillReceiveProps、shouldComponentUpdate生命周期方法来监听URL变化并触发组件更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

[react-router] React-Router 4怎样在路由变化时重新渲染同一个组件？

1.在同一个组件添加不同的key,以下重新封装了组件：

export default function (props) {
  return (<组件 {...props} key={search参数} />)
}

2.但是不知道在路由跳转的地方加入key可行否？

<Route path='/sdspace/offline/:id/detail' exact component={SdSpace.Detail} key={new Date().getTime()} />
<Route path='/sdspace/offline/:id/edit' exact component={SdSpace.Detail} key={new Date().getTime()} />

3.可以在这个组件的componentWillReceiveProps和shouldComponentUpdate生命周期方法中添加url变化的判断，如果url判断变化，就执行相关的逻辑代码(变化了就会就会重新执行render()函数，组件变会进行重新渲染。)

个人简介

我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，
但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试题

最低0.47元/天解锁文章