1 基本路由

步骤一：安装路由

npm install react-router-dom --save

步骤二：引入路由

import { BrowserRouter, Route } from 'react-router-dom'

步骤三：使用

import Login from './pages/login'

import Home from './pages/home'

class App extends Component {

  render() {

    return (

      <Provider store={ store }>

        <div>

          <GlobalStyle />

          <GlobalIcon />

          <BrowserRouter>

            <div>

              <Route path='/' exact  component={Login}></Route>

              <Route path='/home' exact  component={Home}></Route>

            </div>

          </BrowserRouter>

        </div>

      </Provider>

    );

  }

}

2 动态路由

使用prop-types获取组件的属性类型和默认属性

步骤一：安装prop-types

npm install prop-types --save

步骤二：引入

import PropTypes from 'prop-types';

步骤三：使用

static contextTypes = {

        router: PropTypes.object.isRequired

};

this.context.router.history.push("/home");

3 获取路由参数

步骤一：引入prop-types

import PropTypes from 'prop-types';

步骤二：使用

static contextTypes = {

        router: PropTypes.object.isRequired

};

this.context.router.route.params.username