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
           

<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 
           

<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