react做路由跳转，路由传参

如果你项目当中用的是react全家桶，react + react-router + redux + axios + antd类似这样的组合的话那么做路由的话就是react-router，

首先要配置路由，关于react-router路由配置请看：
https://blog.csdn.net/weixin_43606158/article/details/90239415

而后可通过 this.props.history.push('./home')的方法进行路由跳转，或者使用react-router提供的Link组件或者NavLink组件进行路由跳转，关于Link组件和NavLink组件的详细使用还是可以看上面的链接哈~

如果你使用的是react+dva那么做路由跳转就这样做：

首先也是要配置路由。
而后可通过dva提供的dispatch进行路由跳转。
代码如下：

import {dispatch} from 'dva';
function Index(dispatch) {
	return (
	<div
		onClick={() => dispatch.history.push('/admin/login')}
	>回到登录页
	</div>
	)
}(dispatch)

import { history } from 'umi';
import {stringify} from "querystring";

// 省略无用代码。。。
return (
	<a onClick={() => history.push({
	  pathname: '/setting/xxx',
	  search: stringify({
	    type: 'xxx',
	    id: 'xxx'
	  })
	})}>路由跳转</a>
);

路由传参：

如果要在路由调整的时候传递参数：

1.params

<Route path='/path/:name' component={Path}/>
<link to="/path/2">xxx</Link>
this.props.history.push({pathname:"/path/" + name});
读取参数用:this.props.match.params.name

优势 ： 刷新地址栏，参数依然存在
缺点:只能传字符串，并且，如果传的值太多的话，url会变得长而丑陋。
2.query

<Route path='/query' component={Query}/>
<Link to={{ path : ' /query' , query : { name : 'sunny' }}}>
this.props.history.push({pathname:"/query",query: { name : 'sunny' }});
读取参数用: this.props.location.query.name

优势：传参优雅，传递参数可传对象；
缺点：刷新地址栏，参数丢失
3.state

<Route path='/sort ' component={Sort}/>
<Link to={{ path : ' /sort ' , state : { name : 'sunny' }}}> 
this.props.history.push({pathname:"/sort ",state : { name : 'sunny' }});
读取参数用: this.props.location.query.state 

优缺点同query
4.search

<Route path='/web/departManange ' component={DepartManange}/>
<link to="web/departManange?tenantId=12121212">xxx</Link>
this.props.history.push({pathname:"/web/departManange?tenantId=" + row.tenantId});
读取参数用: this.props.location.search

优缺点同params

最后

以上就是满意黑裤为你收集整理的react做路由跳转，路由传参的全部内容，希望文章能够帮你解决react做路由跳转，路由传参所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。