在react里边使用js跳转路由

在react里边使用js跳转路由 react-route 4.0+

寻找解决方案

百度上有各种答案,然鹅很多答案都不适用。直到找到了这个传送门

示例

import React, { Component } from "react";
import { withRouter } from "react-router-dom";

class Nav extends Component {

  render() {
    return (
      <div className="nav">
        <span
          onClick={() => {
            console.log(this);
            this.props.history.push("/");
          }}
        >
          首页
        </span>
        <span
          onClick={() => {
            this.props.history.push("/about");
          }}
        >
          关于
        </span>
      </div>
    );
  }
}

export default withRouter(Nav);

关键点

// 第一步 导入相关组件
import { withRouter } from "react-router-dom";
// 第二步 关联相关组件
export default withRouter(Nav);
// 使用 跳转
this.props.history.push("/");

猜你喜欢

转载自blog.csdn.net/qq_36990322/article/details/89138045