1. this.props.location.query：
1）路由注册
<Route path=' /target ' component={TargetPage}></Route>
2）发起跳转页面
html方式：
<Link to={{ path : ' /target ' , query : { id : '6666' }} >XXXX</Link>
js方式：
this.props.history.push({ pathname : '/target' , query : { id : '6666' }})
3）接受跳转页面const id=this.props.location.query.id;就可以接受到传递过来的参数（id）
2. this.props.location.state：同query差不多，但是state传的参数是加密的，query传的参数是公开的，会在地址栏中显示;
1）Route注册
<Route path=' /target ' component={TargetPage}></Route>
2）发起跳转页面
html方式：
<Link to={{ path : ' /target ' , state : { id : '6666' }} >XXXX</Link>
js方式：
this.props.history.push({ pathname : '/target' , state : { id : '6666' }})
3）接受跳转页面
const id=this.props.location.state.id;
就可以接受到传递过来的参数（id）
3. this.props.location.match：
1）路由注册
<Route path=' /target/:id ' component={TargetPage}></Route>
2）发起跳转页面
html方式：
<Link to={ ' /target/ ' + ' 6666 ' } >XXXX</Link>
js方式：
this.props.history.push( '/target/'+'6666' )
3）接受跳转页面
const id=this.props.location.macth;
就可以接受到传递过来的参数（id）
4. this.props.location.search：
1）路由注册
<Switch> <Route path=' /target ' component={TargetPage}></Route> …… </Switch>
2）发起跳转页面
html方式：
<Link to={path : ' /target?id=6666 ' } >XXXX</Link>
js方式：
this.props.history.push('/target?id=6666')
3）接受跳转页面
相当于解析地址信息：
const id= getQueryVariable(this.props.location.search, 'id');
或者
const id= getQueryVariable(window.location.search，‘id');
就可以接受到传递过来的参数（id）
function getQueryVariable(searchIn, variable) {
if (!searchIn || !variable) {
return null;
}
const query = searchIn.substring(1);
const vars = query.split("&");
for (let i = 0; i < vars.length; i++) {
const pair = vars[i].split("=");
if (pair[0] === variable) {
return pair[1];
}
}
return null;
}
