react-router3与react-router4之间的不同

（1）插件的选择（3选择react-router，4选择react-router-dom）

react-router 为 React Router 提供核心路由功能，但是你不需要直接安装 react-router；
如果你写浏览器端应用，你应该安装 react-router-dom；
如果你写 React Native 应用，你应该安装 react-router-native；
当你安装 react-router-dom 或 react-router-native 时，都会将 react-router 作为依赖安装。

（2）路由的配置

3的配置：

import React from 'react'
import {Router,Route,IndexRoute} from 'react-router-dom'
import { hashHistory } from 'react-router'

class RouteMap extends React.Component {
    updateHandle() {
        console.log('每次router变化之后都会触发')
    }
    render() {
        return (
             <Router history={hashHistory} onUpdate={this.updateHandle.bind(this)}>
                <Route path='/' component={App}>
                    <IndexRoute component={Home}/>
		    <Route path='city' component={City}/>
	            <Route path='search:keyword' component={Search}/>
		    <Route path='user' component={User}/>
                    <Route path='list' component={List}/>
                    <Route path='detail/:id' component={Detail}/>
                    <Route path="*" component={NotFound}/>
                </Route>
            </Router>
        )
    }
}

export default RouterMap

4 的配置

import React from 'react'
import {BrowserRouter as Router,Route,Switch} from 'react-router-dom'
import createHistory from 'history/createBrowserHistory'

const history = createHistory()
class RouterMap extends React.Component {
  updateHandle () {
    console.log('每次router变化都会触发')
  }
  render () {
    return (
      <Router history={history} onUpdate={this.updateHandle.bind(this)}>
        <Switch>
          <Route exact path='/' component={Home}/>
          <Route path='/city' component={City}/>
          <Route path='/search:keyword' component={Search}/>
          <Route path='/user' component={User}/>
          <Route path='/detail:id' component={Detail}/>
          <Route path='*' component={NotFound}/>
        </Switch>
      </Router>
    )}
}

export default RouterMap

import React from 'react'
import {Router,Route} from 'react-router-dom'
import createHistory from 'history/createBrowserHistory'
const history = createHistory()

class RouterMap extends React.Component {
  render() {
      return (
          <Router history={history}>       
                <App>
                  <Route exact path="/" component={Home}/>
                  <Route path='/city' component={City}/>
                  <Route path='/login(/:router)' component={Login}/>
                  <Route path='/user' component={User}/>
                  <Route path='/search/:category(/:keyword)' component={Search}/>
                  <Route path='/detail/:id' component={Detail}/>
                  <Route path='*' component={NotFound}/>
                </App>
          </Router>
      )
  }
}

export default RouterMap