React router 4.0之参数传递
在前一篇文章中说到了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的路由传参就说完了。