react中頁面傳值的方法：1、使用【props.params】方法，程式碼為【
】；2、使用query方式使用很簡單，類似表單中的get方法，傳遞參數為明文。
react中頁面傳值的方法：
一、props.params
官方範例使用React router定義路由時，我們可以給
先定義路由到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,
}
<Link to={path}>用户</Link>
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,
}
<Link to={path}>用户</Link>
hashHistory.push(path);取得數據：
var data = this.props.location.state;
var {id,name,age} = data;state方式依然可以傳遞任意類型的數據，而且可以不以明文方式傳輸。
可以在實作後比較網址列的URL來觀察三種傳值方式URL的差異
相關學習推薦：# javascript學習教學
以上是react中頁面如何傳值的詳細內容。更多資訊請關注PHP中文網其他相關文章！
