react router中页面传值的三种方法

时间: 2018-05-10阅读: 2751标签: react作者: 转载分享

复制链接

新浪微博

QQ 好友

扫一扫分享

这篇文章主要介绍react Router定义路由之后如何传值，有关React和React Router

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中页面传值的三种方法。

站长推荐

1.云服务推荐: 国内主流云服务商，各类云产品的最新活动，优惠券领取。地址：阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/755

react router中页面传值的三种方法

1、props.params

2、query

3、state

一文看懂React Hooks

React 是否保持 state 更新的顺序？

React框架学习_关于React两种构建应用方式选择

React事件绑定几种方法测试

如果没有virtual dom，react会怎样？

React创建组件的三种方式及其区别

React事件处理函数必须使用bind(this)的原因

ReactJS 生命周期、数据流与事件

react hook超实用的用法和技巧分析

如何优雅的设计 React 组件