React-router 页面跳转的三种方式

方式一：

import { withRouter } from 'react-router-dom'

class Index extends Component {
	...
	changePage = () => {
		let { history } = this.props
		history.push({pathname: '/Home'})
	}
}
...

export default withRouter(Index)

方式二：

history.js:

import { createHistory } from 'history';

export default createHistory();

Index.js:

import history from './history';

export default class Index extends Component {
...
	changePage = () => {
		history.push({pathname: '/Home'})
	}
...
}

方式三：

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

class Home extends Component {
  constructor(props){
    super(props)
  };
  render(){
    return (
      <div>
        <NavLink
          to="/Home/ShoppingCart"
          activeStyle={{
            fontWeight: "bold",
            color: "red"
          }}
          replace
        >
          跳转到 ShppingCart
        </NavLink>

        <br/>

        <NavLink
          to="/Home/Classify"
          activeStyle={{
            fontWeight: "bold",
            color: "red"
          }}
          replace
        >
          跳转到 Classify
        </NavLink>

        <br/> <br/>

        {this.props.children}
      </div>
    )
  }
}

export default Home