前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >React router 4.0之参数传递

React router 4.0之参数传递

作者头像
OECOM
发布2020-07-01 17:37:13
1.7K0
发布2020-07-01 17:37:13
举报
文章被收录于专栏:OECOM

在前一篇文章中说到了react router 4的路由如何配置,这篇文章说一下路由跳转的参数问题。路由跳转传参一种方式是在link标签上写参数,另一种方式是通过方法传递参数,下面依次说一下。

先来说一下在Link标签内通过?来进行传递参数。

先看一下about.js文件内容

代码语言:javascript
复制
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处查看也比较清晰明了。当然还有另一种写法:

代码语言:javascript
复制
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中注册一个,并且顺序要一致。当然,接收方式也是不同的,先说第一种方式的接收方法:

代码语言:javascript
复制
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,即可获取到参数。

很多情况下并不是直接通过点击来进行页面的跳转,这时可能会涉及到一些逻辑判断以后才进行跳转,下面来看实现方法:

代码语言:javascript
复制
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是一个名字,可以自定义,接收的时候需要通过该名称来进行接收。

代码语言:javascript
复制
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的路由传参就说完了。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-02-09,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档