一.props.params
官方例子使用React router定義路由時,我們可以給<Route>指定一個path,然後指定通配符可以攜帶參數到指定的path:
首先定義路由到UserPage頁面:
import { Router,Route,hashHistory} from 'react-router';
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方式依然可以傳遞任意類型的數據,而且可以不以明文方式傳輸。
可以在實現後對比地址欄的URL來觀察三種傳值方式URL的區別