详解React-Router中Url参数改变页面不刷新的解决办法
更新时间：2018年05月08日 09:02:26 作者：Kindem
这篇文章主要介绍了详解React-Router中Url参数改变页面不刷新的解决办法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
问题
今天在写页面的时候发现一个问题，就是在React Router中使用了Url传参的功能，像这样:
export class MainRouter extends React.Component {
render() {
return (
<BrowserRouter>
<Switch>
...
<Route exact path={'/channel/:channelId'} component={ChannelPerPage}/>
...
</Switch>
</BrowserRouter>
);
}
}
按照官方文档的说法，可以在ChannelPerPage这个组件中使用
this.props.match.params
来获取url参数的值，但是我发现如果你在这个url下只将url中的参数部分改变，比如channelId从1变成2的时候，页面并不会刷新。
解决办法
查阅资料后发现这样的根本原因是props的改变并不会引起组件的重新渲染，只有state的变化才会引起组件的重新渲染，而url参数属于props，故改变url参数并不会引起组件的重新渲染。
后来发现React的组件中有一个可复写的方法
componentWillReceiveProps(nextProps) {
...
}
这个方法可以在React组件中被复写，这个方法将会在props改变的时候被调用，所以你可以使用这个方法将nextProps获取到，并且在这个方法里面修改state的内容，这样就可以让组件重新被渲染。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了React如何实现模糊搜索和关键字高亮的效果,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2023-11-11
这篇文章主要介绍了React从Class方式转Hooks详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-09-09
这篇文章主要介绍了React 元素渲染的相关资料，文中示例代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下2020-07-07
TypeScript 实际上就是具有强类型的 JavaScript,可以对类型进行强校验,好处是代码阅读起来比较清晰,代码类型出现问题时,在编译时就可以发现,而不会在运行时由于类型的错误而导致报错,这篇文章主要介绍了ReactJS中使用TypeScript的方法,需要的朋友可以参考下2024-04-04
react-redux是redux官方react绑定库，能够使react组件从redux store中读取数据，并且向store分发actions以此来更新数据，这篇文章主要介绍了react-redux使用,需要的朋友可以参考下2022-08-08
这篇文章主要为大家详细介绍了React中获取真实的dom的相关方法,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以跟随小编一起学习一下2025-02-02
这篇文章主要给大家介绍了关于react在安卓中输入框被手机键盘遮挡问题的解决方法，文中通过图文以及示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起看看吧2018-09-09
这篇文章主要为大家介绍了React中如何处理承诺demo，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
React 正确使用useCallback useMemo的方式
这篇文章主要介绍了React 正确使用useCallback useMemo的方式，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的朋友可以参考一下2022-08-08
这篇文章主要为大家详细介绍了react实现拖拽模态框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
最新评论