在前一篇文章中说到了react router 4的路由如何配置,这篇文章说一下路由跳转的参数问题。路由跳转传参一种方式是在link标签上写参数,另一种方式是通过方法传递参数,下面依次说一下。
先来说一下在Link标签内通过?来进行传递参数。
先看一下about.js文件内容
import React,{Component} from 'react'
import Child1 from './child1'
import Child2 from './child2'
import {Link,Route,Redirect} from 'react-router-dom'
class About extends Component{
constructor(props){
super(props);
this.state = {
myName : "这里是about页面"
}
}
componentWillMount(){
}
showName(){
console.log(this);
}
render(){
let Child1Com = null;
if(this.props.location.pathname=='/about'){
Child1Com = <Redirect to="/about/child1">child1</Redirect>;
}else{
Child1Com = <Link to="/about/child1">child1</Link>;
}
return (
<div>
{this.state.myName}
<div>
<button onClick={this.showName.bind(this)}>按钮</button>
<Link to="/inbox">inbox</Link>
<div>
{Child1Com}
<Link to="/about/child2?id=4">child2</Link>
<Route path="/about/child1" component={Child1}/>
<Route path="/about/child2" component={Child2}/>
</div>
</div>
</div>
)
}
}
export default About
在Link的连接里通过?写明参数,在跳转过去的页面通过js来获取url参数。这种方式对于参数的传递比较灵活,在url处查看也比较清晰明了。当然还有另一种写法:
return (
<div>
{this.state.myName}
<div>
<button onClick={this.showName.bind(this)}>按钮</button>
<Link to="/inbox">inbox</Link>
<div>
{Child1Com}
<Link to="/about/child2/4/10">child2</Link>
<Route path="/about/child1" component={Child1}/>
<Route path="/about/child2/:id/:count" component={Child2}/>
</div>
</div>
</div>
)
这种方式也可以进行参数的传递,缺点在于url路径显示效果和传递参数的灵活性,每增加一个参数,就需要在下面的Route中注册一个,并且顺序要一致。当然,接收方式也是不同的,先说第一种方式的接收方法:
const getParameter = (param)=>{
var query = window.location.search;
var iLen = param.length;
var iStart = query.indexOf(param);
if (iStart == -1)
return "";
iStart += iLen + 1;
var iEnd = query.indexOf("&", iStart);
if (iEnd == -1)
return query.substring(iStart);
return query.substring(iStart, iEnd);
}
我的方式是将此段代码放到了一个js文件中,然后引入到相应的组件里,就可以获取到url参数,这种方式和普通的url获取参数方式相同,调用方法就是:getParameter('id')。
再说第二种获取参数的方式为:this.props.match.params.id,即可获取到参数。
很多情况下并不是直接通过点击来进行页面的跳转,这时可能会涉及到一些逻辑判断以后才进行跳转,下面来看实现方法:
import React,{Component} from 'react'
import {Link} from 'react-router-dom'
import {getParameter} from '../static/js/common.js'
class Child2 extends Component{
constructor(){
super();
this.state = {
myName : "这里是child2页面"
}
}
componentWillMount(){
}
goIndox(){
this.props.history.push({
pathname:"/inbox",
query:{
name:"inbox",
myas:"哈哈"
}
})
}
render(){
return (
<div>
{this.state.myName}
<div>
<h1>child2页面</h1>
<div>
<button onClick={this.goIndox.bind(this)}>inbox</button>
</div>
</div>
</div>
)
}
}
export default Child2
query就是要传递的参数,此处的query是一个名字,可以自定义,接收的时候需要通过该名称来进行接收。
import React,{Component} from 'react'
import {Link} from 'react-router-dom'
class Inbox extends Component{
constructor(){
super();
this.state = {
myName : "这里是Inbox页面"
}
}
componentWillMount(){
}
showName(){
console.log(this.state);
console.log(this.props.location.query.name);
}
render(){
return (<div>fd
<ul>
<li><Link to="/" >首页</Link></li>
<button onClick={this.showName.bind(this)}>查看</button>
</ul>
</div>
)
}
}
export default Inbox
如此,react router 4的路由传参就说完了。