详解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 router路由传参
后来发现React的组件中有⼀个可复写的⽅法
componentWillReceiveProps(nextProps) {
...
}
这个⽅法可以在React组件中被复写，这个⽅法将会在props改变的时候被调⽤，所以你可以使⽤这个⽅法将nextProps获取到，并且在这个⽅法⾥⾯修改state的内容，这样就可以让组件重新被渲染。
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。