React Router 頁面傳值的四種方法

2021-08-08 02:26:38 字數 2357 閱讀 9287

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

一. props.params

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

首先定義路由到 userpage 頁面:

import  from 'react-router';


import  from 'react-router';
render()

}上面指定引數乙個引數 name 

使用：

import  from 'react-router';
1.link 元件實現跳**

使用者
2.history 跳**

hashhistory.push("/user/sam");
當頁面跳轉到 userpage 頁面之後，取出傳過來的值：

export default class userpage extends react.component


render()


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

如：定義路由：

使用：

var data = ;


data = json.stringify(data);


var path = `/user/$`;
1.使用者
2.hashhistory.push(path);
獲取資料：

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


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

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

首先定義路由：

使用：

var data = ;


var path =
1.使用者
2.hashhistory.push(path);
獲取資料：

var data = this.props.location.query;


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

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

首先定義路由：

使用：

var data = ;


var path =
1.使用者
2.hashhistory.push(path);
獲取資料：

var data = this.props.location.state;


var  = data;

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

// 向詳情頁傳遞要傳遞的值


clickhandler(value) ,


})console.log(value);


}}

接收引數：

billname：


billtittle：


billid：


billimg：

可以在實現後對比位址列的 url 來觀察三種傳值方式 url 的區別

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定義路由之後如何傳值，有關react和react router 的基礎請參考阮老師的部落格 注 本文示例react router版本為 3.0.2，使用前請注意檢查版本 1一.props.params 官方例子使用react router定義路由時，我們可以給指定...