react+umi---頁面之間傳值方式

一.props.params
官方例子使用React router定義路由時，我們可以給<Route>指定一個path，然后指定通配符可以攜帶參數到指定的path：
首先定義路由到UserPage頁面:

import { Router,Route,hashHistory} from 'react-router';
1

class App extends React.Component {
　　render() {
　　　　return (
　　　　　　<Router history={hashHistory}>
　　　　　　　　<Route path='/user/:name' component={UserPage}></Route>
　　　　　　</Router>
　　)
　　}
}

　　

上面指定參數一個參數name
使用：

import {Link,hashHistory} from 'react-router';

1.Link組件實現跳轉：

<Link to="/user/sam">用戶</Link>

2.history跳轉：

hashHistory.push("/user/sam");

 

當頁面跳轉到UserPage頁面之后，取出傳過來的值：

export default class UserPage extends React.Component{
　　constructor(props){
　　　　super(props);
　　}
　　render(){
　　　　return(<div>this.props.params.name</div>)
　　}
}

上面的方法可以傳遞一個或多個值，但是每個值的類型都是字符串，沒法傳遞一個對象,如果傳遞的話可以將json對象轉換為字符串，然后傳遞過去，傳遞過去之后再將json字符串轉換為對象將數據取出來
如：定義路由：

<Route path='/user/:data' component={UserPage}></Route>

使用：

var data = {id:3,name:sam,age:36};
data = JSON.stringify(data);
var path = `/user/${data}`;

 

<Link to={path}>用戶</Link>
hashHistory.push(path);

獲取數據：

var data = JSON.parse(this.props.params.data);
var {id,name,age} = data;

通過這種方式跳轉到UserPage頁面時只能通過傳遞字符串來傳遞參數，那么是否有其他方法來優雅地直接傳遞對象而不僅僅是字符串呢？

二.query
query方式使用很簡單，類似於表單中的get方法，傳遞參數為明文：
首先定義路由：

<Route path='/user' component={UserPage}></Route>

使用：

var data = {id:3,name:sam,age:36};
var path = {
    pathname:'/user',
    query:data,
}

　　

1.<Link to={path}>用戶</Link>

2.hashHistory.push(path);

獲取數據：

var data = this.props.location.query;
var {id,name,age} = data;

query方式可以傳遞任意類型的值，但是頁面的URL也是由query的值拼接的，URL很長，那么有沒有辦法類似於表單post方式傳遞數據使得傳遞的數據不以明文傳輸呢？

三.state
state方式類似於post方式，使用方式和query類似，
首先定義路由：

<Route path='/user' component={UserPage}></Route>

使用：

var data = {id:3,name:sam,age:36};
var path = {
pathname:'/user',
state:data,
}

1.<Link to={path}>用戶</Link>

2.hashHistory.push(path);

獲取數據：

var data = this.props.location.state;
var {id,name,age} = data;

state方式依然可以傳遞任意類型的數據，而且可以不以明文方式傳輸。

原文鏈接：https://blog.csdn.net/qq_23158083/article/details/68488831