在react-router@4中传参有三种方式
一、通过params传参:
1、在路由表中:
2、Link处使用:
3、js处使用
this.props.history.push('/detail/' + id) //页面跳转
this.props.history.replace('/detail/' + id) //参数改变重新当前页面渲染
4、参数获取
console.log(this.props.match.params)
这种方法有两个注意点,与2、3区别:
11、 //2\3路由的可选参数keyword
// 4路由可选参数是这样的
12、this.props.history.push('/detail/' + id) //2/3中可实现页面的反复渲染,在4中就会报错,用该用replace代替
13、this.props.params //在2/3可获取到传递过来的参数,而在4中会抱undefined的错会,改用this.props.match.params即可
二、通过query传参
1、Link处使用:
2、js处引用:
this.props.history.push({pathname:'/search', query:{'type': type,'keyword': value}})
3、参数获取:
console.log(this.props.location.query) //获取到传递过来的query对象
三、通过state传参
1、Link处使用
2、js处引用
this.props.history.push({pathname:'/search', query:{'type': type,'keyword': value}})
3、参数获取
console.log(this.props.location.state) //获取到传递过来的query对象
注:query与state传参异同点
同:
1、不需要配置路由表
2、必须有其它页面跳转过来才能获取参数,当前页面刷新,参数清空
异:
1、state传参是加密的,query是公开的,显示在地址栏