您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關(guān)react中頁面?zhèn)髦档姆椒ǖ膬?nèi)容。小編覺得挺實用的,因此分享給大家做個參考。一起跟隨小編過來看看吧。
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)容可以對大家有一定的幫助,讓大家可以學到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。