React Router頁面傳值的三種方法

2021-09-12 21:39:19 字數 1915 閱讀 3858

本文主要介紹react router定義路由之後如何傳值,有關react和react router 

的基礎請參考阮老師的部落格

注:本文示例react router版本為:3.0.2,使用前請注意檢查版本

1一.props.params

官方例子使用react router定義路由時,我們可以給指定乙個path,然後指定萬用字元可以攜帶引數到指定的path: 

首先定義路由到userpage頁面:

import  from 'react-router';

render()

}

上面指定引數乙個引數name 

使用:

import  from 'react-router';

11.link元件實現跳**

使用者

12.history跳**

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

1當頁面跳轉到userpage頁面之後,取出傳過來的值:

export default class userpage extends react.component

render()

}

上面的方法可以傳遞乙個或多個值,但是每個值的型別都是字串,沒法傳遞乙個物件,如果傳遞的話可以將json物件轉換為字串,然後傳遞過去,傳遞過去之後再將json字串轉換為物件將資料取出來 

如:定義路由:

使用:

var data = ;

data = json.stringify(data);

var path = `/user/$`;

使用者hashhistory.push(path);

獲取資料:

var data = json.parse(this.props.params.data);

var = data;

通過這種方式跳轉到userpage頁面時只能通過傳遞字串來傳遞引數,那麼是否有其他方法來優雅地直接傳遞物件而不僅僅是字串呢?

二.query

query方式使用很簡單,類似於表單中的get方法,傳遞引數為明文: 

首先定義路由:

1使用:

var data = ;

var path =

使用者hashhistory.push(path);

獲取資料:

var data = this.props.location.query;

var = data;

query方式可以傳遞任意型別的值,但是頁面的url也是由query的值拼接的,url很長,那麼有沒有辦法類似於表單post方式傳遞資料使得傳遞的資料不以明文傳輸呢?

三.state

state方式類似於post方式,使用方式和query類似, 

首先定義路由:

var data = ;

var path =

使用者hashhistory.push(path);

獲取資料:

var data = this.props.location.state;

var = data;

state方式依然可以傳遞任意型別的資料,而且可以不以明文方式傳輸。

react router跳轉傳值

跳轉頁面傳遞引數 1.引入包 import from react router 2.跳轉傳值 handleclick value 3.接收值 console.info this props.location.query.title console.info this props.location.q...

react router跳轉傳值

跳轉頁面傳遞引數 1.引入包 import from react router 2.跳轉傳值 handleclick value 3.接收值 console.info this props.location.query.title console.info this props.location.q...

React Router 頁面傳值的四種方法

注 本文示例react router版本為 3.0.2,使用前請注意檢查版本 一.props.params 官方例子使用 react router 定義路由時,我們可以給指定乙個 path,然後指定萬用字元可以攜帶引數到指定的 path 首先定義路由到 userpage 頁面 import from...