1. 程式人生 > >React Router路由傳值的三種方法

React Router路由傳值的三種方法

一.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,

}

1. <Link to={path}>使用者</Link>

2. 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,

}

1. <Link to={path}>使用者</Link>

2. hashHistory.push(path);

獲取資料:

var data = this.props.location.state;

var {id,name,age} = data;

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

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