參考:https://blog.csdn.net/qq_23158083/article/details/68488831
以下方式基于react router版本為3.0.2
一键俱、params方式傳遞
1、定義路由到detail頁(yè)面
import {Router,Route,hashHistory} from "react-router";
class App extends React.Component {
? ? render(){
? ? ? ? return (
? ? ? ? ? ? <Router history={hashHistory}>
? ? ? ? ? ? ? ? <Route path="/detail/:personId" component={Detail}></Route>
? ? ? ? ? ? </Router>
????????)
????}
}
2世分、實(shí)現(xiàn)跳轉(zhuǎn)的方式
import {Link,hashHistory} from "react-router";
2.1编振、Link組件實(shí)現(xiàn)跳轉(zhuǎn)
<Link to="/detail/33">跳轉(zhuǎn)到詳情頁(yè)面</Link>
2.2、history實(shí)現(xiàn)跳轉(zhuǎn)
hashHistory.push("/detail/33")
3臭埋、目標(biāo)頁(yè)面取值的方式
this.props.params.personId
4踪央、該方式只能通過(guò)字符串的方式傳遞參數(shù),如需傳遞一個(gè)對(duì)象過(guò)去瓢阴,需要先將對(duì)象轉(zhuǎn)化為字符串(JSON.stringify(json))畅蹂,在目標(biāo)頁(yè)面接收后在轉(zhuǎn)化為對(duì)象(JSON.parse(string))
二、query方式傳遞(類(lèi)似表單get方法)
1荣恐、定義路由到detail頁(yè)面
<Route path="/detail" component={Detail}></Route>
2液斜、實(shí)現(xiàn)跳轉(zhuǎn)的方式
const data={id:33,age:56};
const path={
? ? pathname:"/detail",
? ? query:data,
}
<Link to={path}>跳轉(zhuǎn)到詳情頁(yè)面</Link>
hashHistory.push(path)
3、目標(biāo)頁(yè)面取值方式
this.props.location.query
4叠穆、該方式為在url上明文傳遞少漆,會(huì)導(dǎo)致url很長(zhǎng)
三、state方式傳遞(類(lèi)似表單post方法)
1硼被、使用方式與query方式傳遞的一樣
2示损、該方式可以傳遞任意類(lèi)型的數(shù)據(jù),而且是非明文的方式