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 (
            
                
                
                
                
            
        )
    }
}
export default Routes;

使用时直接引入

import { BrowserRouter as Router } from 'react-router-dom'
import Routes from './route/route'
      
            
              
                
              
              
                
              
            
      

这样引入的话，视图只会刷新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)