社区首页 >专栏 >React router 4.0之参数传递

React router 4.0之参数传递

OECOM

发布于 2020-07-01 09:37:13

1.8K00

代码可运行

文章被收录于专栏：OECOMOECOM

运行总次数：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