上一篇我們說到了路由組件的嵌套。想必你已經運用自如了。那麽，這一次我們來聊一聊4.X中Router的變更。

在3.X中我們若使用路由的模式，可通過在Router上配置history的值即可。

例如，

import { Router, Route, hashHistory} from "react-router"
import routes from "./routes"

<Router history={hashHistory} routes={routes}>
    <Route path="/" component={App}/>
</Router>

在4.X中提供幾種不同的路由組件來替代history屬性的作用，分別是

<BrowserRouter>

import { BrowserRouter } from ‘react-router-dom‘

<BrowserRouter
  basename={optionalString}
  forceRefresh={optionalBool}
  getUserConfirmation={optionalFunc}
  keyLength={optionalNumber}
>
  <App/>
</BrowserRouter>

<HashRouter>

import { HashRouter } from ‘react-router-dom‘

<HashRouter>
  <App/>
</HashRouter>

<MemoryRouter> 一般用於測試或者無瀏覽器的環境中，像是react native中

<MemoryRouter
  initialEntries={[ ‘/one‘, ‘/two‘, { pathname: ‘/three‘ } ]}
  initialIndex={1}
>
  <App/>
</MemoryRouter>

<StaticRouter> 一般用於服務端，永遠不會改變location

<StaticRouter location={req.url} context={context}>
      <App/>
</StaticRouter>

需要註意的是，router組件只能有一個子元素

你應該知道的react router 4（三）