React Router v4 頁面傳值的三種方法

傳值方法

1、props.params

使用React router定義路由時，我們可以給指定一個path，然後指定萬用字元可以攜帶引數到指定的path：

<Route path=`/user/:name` component={UserPage}></Route>

跳轉UserPage頁面時，可以這樣寫：

//link方法
<Link to="/user/sam">使用者</Link>
//push方法
this.props.history.push("/user/sam");

在UserPage頁面中通過 this.props.params.name 獲取值。

上面的方法可以傳遞一個或多個值，但是每個值的型別都是字串，沒法傳遞一個物件,如果要傳的話可以將json物件轉換為字串，傳遞過去之後再將json字串轉換為物件。

 let data = {id:3,name:sam,age:36};
 data = JSON.stringify(data);
 let path = `/user/${data}`;

 //在頁面中獲取值時
 let data = JSON.parse(this.props.params.data);

2、query

query方式可以傳遞任意型別的值，但是頁面的URL也是由query的值拼接的，URL很長且是明文傳輸。

    //定義路由
    <Route path=`/user` component={UserPage}></Route>

    //資料定義
    let data = {id:3,name:sam,age:36};
    let path = {
        pathname: `/user`,
        query: data,
    }

    //頁面跳轉
    <Link to={path}>使用者</Link>
    this.props.history.push(path);

    //頁面取值
    let data = this.props.location.query;
    let {id,name,age} = data;

3、state

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

    //定義路由
    <Route path=`/user` component={UserPage}></Route>

    //資料定義
    let data = {id:3,name:sam,age:36};
    let path = {
        pathname: `/user`,
        state: data,
    }

    //頁面跳轉
    <Link to={path}>使用者</Link>
    this.props.history.push(path);

    //頁面取值
    let data = this.props.location.state;
    let {id,name,age} = data;

以上就是react router中頁面傳值的三種方法。