React学习（编程式导航）

学习目标：

提示：这里可以添加学习目标

（1） 编程式导航

编程式导航，提供了通过脚本代码实现页面跳转的功能

主要api函数包含在路由对象参数：history中

• this.props.history
  • push("/login")：跳转到登录路径，保留访问记录
  • replace("/login")：跳转到登录路径，不保留历史记录
  • go(n)：跳转到历史某个访问记录
  • goBack()：后退
  • goForward()：前进

import React, {Component} from 'react';
import qs from 'qs'

class User extends Component {

    getHistory() {
       this.props.history.push("/login")
    }

    render() {
        // 查询字符串传参，接收参数
        const {search} = this.props.location
        var query = qs.parse(search, { ignoreQueryPrefix: true });
        return (
            <div>
                <h2>用户详情</h2>
                <p>用户编号：{query.id}</p>
                <p>用户名称：{query.name}</p>
                <button onClick={this.getHistory.bind(this)}>返回上一层</button>
            </div>
        );
    }
}

export default User;