react中頁面如何傳值

react中頁面傳值的方法：1、使用【props.params】方法，程式碼為【】；2、使用query方式使用很簡單，類似於表單中的get方法，傳遞引數為明文。

react中頁面傳值的方法：

一、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,
}
<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的區別

相關學習推薦：

以上就是react中頁面如何傳值的詳細內容，更多請關注TW511.COM其它相關文章！