這篇文章給大家分享的是有關(guān)react中頁面?zhèn)髦档姆椒ǖ膬?nèi)容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)公司專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站建設(shè)、網(wǎng)站制作、涇源網(wǎng)絡(luò)推廣、小程序設(shè)計、涇源網(wǎng)絡(luò)營銷、涇源企業(yè)策劃、涇源品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們大的嘉獎；創(chuàng)新互聯(lián)公司為所有大學生創(chuàng)業(yè)者提供涇源建站搭建服務(wù)，24小時服務(wù)熱線：18980820575，官方網(wǎng)址：www.chinadenli.net

react中頁面?zhèn)髦档姆椒ǎ?、使用【props.params】方法，代碼為【

react中頁面?zhèn)髦档姆椒ǎ?/strong>

一、props.params

官方例子使用React router定義路由時，我們可以給<Route>指定一個path，然后指定通配符可以攜帶參數(shù)到指定的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>
    )
  }
}

上面指定參數(shù)一個參數(shù)name

使用：

import {Link,hashHistory} from 'react-router';

1、Link組件實現(xiàn)跳轉(zhuǎn)：

<Link to="/user/sam">用戶</Link>

2、history跳轉(zhuǎn)：

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

當頁面跳轉(zhuǎn)到UserPage頁面之后，取出傳過來的值：

export default class UserPage extends React.Component{
    constructor(props){
        super(props);
    }
    render(){
        return(<div>this.props.params.name</div>)
    }
}

上面的方法可以傳遞一個或多個值，但是每個值的類型都是字符串，沒法傳遞一個對象,如果傳遞的話可以將json對象轉(zhuǎn)換為字符串，然后傳遞過去，傳遞過去之后再將json字符串轉(zhuǎn)換為對象將數(shù)據(jù)取出來

如：定義路由：

<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);

獲取數(shù)據(jù)：

var data = JSON.parse(this.props.params.data);
var {id,name,age} = data;

通過這種方式跳轉(zhuǎn)到UserPage頁面時只能通過傳遞字符串來傳遞參數(shù)，那么是否有其他方法來優(yōu)雅地直接傳遞對象而不僅僅是字符串呢？

二、query

query方式使用很簡單，類似于表單中的get方法，傳遞參數(shù)為明文：

首先定義路由：

<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);

獲取數(shù)據(jù)：

var data = this.props.location.query;
var {id,name,age} = data;

query方式可以傳遞任意類型的值，但是頁面的URL也是由query的值拼接的，URL很長，那么有沒有辦法類似于表單post方式傳遞數(shù)據(jù)使得傳遞的數(shù)據(jù)不以明文傳輸呢？

三、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);

獲取數(shù)據(jù)：

var data = this.props.location.state;
var {id,name,age} = data;

state方式依然可以傳遞任意類型的數(shù)據(jù)，而且可以不以明文方式傳輸。

可以在實現(xiàn)后對比地址欄的URL來觀察三種傳值方式URL的區(qū)別

感謝各位的閱讀！關(guān)于react中頁面?zhèn)髦档姆椒ň头窒淼竭@里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

本文題目：react中頁面?zhèn)髦档姆椒?創(chuàng)新互聯(lián)
文章URL：http://www.chinadenli.net/article12/deidgc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊、品牌網(wǎng)站設(shè)計、靜態(tài)網(wǎng)站、營銷型網(wǎng)站建設(shè)、做網(wǎng)站、品牌網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)