react-router v4 手动控制路由跳转

手动控制路由跳转,其实就是使用history来控制路由跳转的。。。
react-router v3我没用过,所以就不做比较了

1. 使用 withRouter

引入withRouterimport { withRouter } from "react-router-dom"
然后用高阶组件withRouter把要导出的组件传入进去
最后使用this.props.history.push()把你需要跳转的路由push进去就好了
  • 例子

import React from "react";
import { withRouter } from "react-router-dom";
import { message, Popconfirm } from "antd";
import "../css/feedback.css";

class Logout extends React.Component {

  constructor(props) {
    super(props);
  }

  confirm = () => {
    this.props.history.push("/");
  };
    
  cancel = () => {
    message.error("Click on No");
  };

  render() {
    return (
      <div>
        <Popconfirm
          title="确定要退出登录吗?"
          onConfirm={this.confirm}
          onCancel={this.cancel}
          okText="退出"
          cancelText="取消"
        >
          <a>注销</a>
        </Popconfirm>
      </div>
    );
  }
}

export default withRouter(Logout);

2.使用context

这个方法不太推荐,因为官方也不推荐,可能在react未来的版本会被废除
重点在这三段中
import PropTypes from "prop-types";  
static contextTypes = {
    router: PropTypes.object
}
this.context.router.history.push("/");  //把你需要跳转的路由push进去
import React from "react";
import PropTypes from "prop-types";
import { message, Popconfirm } from "antd";
import "../css/feedback.css";

class Logout extends React.Component {
  
  static contextTypes = {
    router: PropTypes.object
  }

  constructor(props) {
    super(props);
  }

  confirm = () => {
    this.context.router.history.push("/");
  };
    
  cancel = () => {
    message.error("Click on No");
  };

  render() {
    return (
      <div>
        <Popconfirm
          title="确定要退出登录吗?"
          onConfirm={this.confirm}
          onCancel={this.cancel}
          okText="退出"
          cancelText="取消"
        >
          <a>注销</a>
        </Popconfirm>
      </div>
    );
  }
}

export default Logout;

3.自己创建history

这是我个人比较喜欢也比较推荐的用法
import createHistory from 'history/createBrowserHistory';

export default createHistory();

在其他页面我们就可以引入history,注意下路径

import history from './history';

const skip = () => {
    history.push("/"); 
}

推荐阅读更多精彩内容

  • React Router 4.0 (以下简称 RR4) 已经正式发布,它遵循React的设计理念,即万物皆组件。所...
    梁相辉阅读 93,669评论 24 194
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 157,590评论 24 688
  • 万恶的根源 距离React Router v4 正式发布也已经过去三个月了,这周把一个React的架子做了升级,之...
    桂圆_noble阅读 67,567评论 24 101
  • 最近很多喜欢追着欢乐颂这部剧看,每天都追着,不落下一集。 因为从剧中的五美中,总有一个能找到自己的影子。 就像是在...
    想不一样的自己阅读 94评论 0 0
  • (1)Hive的基本介绍 **** (2)Hive与传统数据库的区别 Hive不支持数据的更新,,也不支持事务和索...
    是蓝先生阅读 1,082评论 0 2