今天发现, 当使用react-router(v4.2.2)时,路由需要传入参数, 但是如果路由跳转时,url仅仅改变的是参数部分,如从hello/1跳转到hello/2,此时虽然参数更新了,但是页面是不会更新的,这也算是react-router的一个设计缺陷吧发现网上的解决方法主要有两种一、先跳转到一个与当前页面不仅仅是路由参数不同的页面,然后再跳转回来,这样路由跳转了两次。如下所示:
this.props.history.push('/empty'); // 空白页面
setTimeout(() => {
this.props.history.replace(`/hello/${id}`); // 要跳转的页面,其中id为参数
});
但是这样的话白白加载了一个页面,个人感觉不是很好
二、第二种方法是使用 componentWillReceiveProps(newProps) 函数,当 props 改变时,我们就可以在该函数中通过 newProps.match.params.id 拿到新的url参数,进而进行更新。如下
componentWillReceiveProps(newProps) {
const id = newProps.match.params.id;
// 一些操作
}
我个人比较喜欢这种方法但是如果使用这种方法的话,需要注意的一点是:我们可能在react中使用的的组件不止一个,需要执行 componentWillReceiveProps 方法的组件可能是作为子组件存在的。也就是说react-router直接作用的组件是使用 componentWillReceiveProps 组件的父组件这个时候路由参数的改变是监测不到的,为了能够监测到,需要在父组件中把 props 传给子组件,就像这样
<Route path="/hello/:id" component={MyHome} />export default class MyHome extends React.Component {
constructor(props) {
super(props);
this.state = {
};
} render() {
return (
// react-router当url参数改变时不能自动更新页面,为了url参数改变时能够自动更新
// 在子组件中使用componentWillReceiveProps(),当props改变时会自动调用该函数
// 但是现在url的参数是直接作用在page(当前页面组件)上的,为了让子组件监测到props
// 的变化,将props全部传给子组件
<UserInfo {...this.props} />
);
}
}export default class UserInfo extends React.Component {
constructor(props) {
super(props);
this.state = {};
} componentWillReceiveProps(newProps) {
const id = newProps.match.params.id;
//一些操作
} render() {
return (
<div className="userinfo-container">
</div>
);
}
}
如有错误,欢迎留言指出
参考:
https://www.cnblogs.com/gdsblog/p/7348375.htmlhttps://segmentfault.com/q/1010000010522122http://www.shenyujie.cc/2018/03/04/reactRouter_v1/