React中使用react-router-dom路由（使用js控

安装

$ npm install --save react-router-dom

单独定义路由文件

import React, { Component } from 'react';
import { Switch, Route } from 'react-router-dom'
// 视图
import Index from '../view/index/index'
import User from '../view/user/user'
import Maps from '../view/map/map'
import Photo from '../view/photo/photo'

class Routes extends Component {
    render() {
        return (
            <Switch>
                <Route exact path="/" component={Index} />
                <Route exact path="/map" component={Maps} />
                <Route exact path="/user" component={User} />
                <Route exact path="/photo" component={Photo} />
            </Switch>
        )
    }
}
export default Routes;

使用时直接引入

import { BrowserRouter as Router } from 'react-router-dom'
import Routes from './route/route'
      <Router>
            <Layouts>
              <Contents>
                <Routes />
              </Contents>
              <Footers>
                <Foot />
              </Footers>
            </Layouts>
      </Router>

这样引入的话，视图只会刷新Contents部分，Footers部分不会刷新。
使用js跳转时，需要用withRouter把这个组件包起来，这样props里才有history等属性

import { withRouter, Link } from 'react-router-dom'
this.props.history.push('/user')

//  高阶组件中的withRouter,
//  作用是将一个组件包裹进Route里面,
//  然后react-router的三个对象history, location, match就会被放进这个组件的props属性中.
export default withRouter(Foot)