本文主要是了解下
react-router
新版本一些理念，为我们以后的开发注入一些感性认知。
react router
目前最新的版本是v5.1.2。
此版本没有重大更改。如果已经在使用4.x版本，则可以在零代码更改的情况下立即使用版本5。v5中最显着的改进是对React 16的全面支持，同时保持了与React> = 15的完全兼容性。
@Michael Jackson - react router 主要作者
从
v4
开始，相较于之前的版本有很大的变化，
react
彻底将“Just Component ” 一切皆组件的理念贯彻到底，所以开发方式也发生了极大的变化，从思维上要有所转换。
可能你已经用惯了
v3
的开发方式，一时难以转变，但是任何新事物的诞生必然有他的理由，当我用过
v5
之后，不得不说真的很方便,变得更简单，更灵活。
下面简单的说下从
v4
开始的一些重大的改进
分包
v4
之前只有一个库
react-router
。
从
v4
开始分为了两个库
-
react-router
-
react-router-dom
DOM
当然还有
react-router-native
这可以理解成在架构上做了一些调整，通用的和平台无关的能力放在一个库，和平台耦的相关能力放在了一个库，这和我们平时的开发中代码优化差不多。
react
最开始也只有一个库。后来拆分开来
react
和
react-dom
还有
react-native
。
所以在使用的时候只需要安装
react-router-dom
即可，核心库属于依赖库，会自动安装。
一切皆组件 - 思维模式的转变
既然一切都是组件，那么我们可以按照以往写组件的方式来使用路由，也可以把路由和其他组件写在一起，可以当做 UI 组件的一部分来进行渲染。
升级之后的
Route
、
Link
、
Switch
、
BrowerRouter
、
HashRouter
等都是一个普通的组件。
//v3
<Router history={browserHistory}></Router>
//v4
<BrowerRouter></BrowerRouter>
//v4 新增 Switch 组件
<Switch><Route></Route></Switch>
复制
非集中式路由 - 更灵活
v4
之前版本我们只能将路由规则集中写在一起，无法和其他的组件写在一起，更像是
api
的组合。
看下 v3的写法
import { Router, Route, IndexRoute } from 'react-router'
const Layout = props => (
<div className="Layout-box">
<header>
React Router 3 App
</header>
<main>
{props.children}
</main>
</div>
)
const HomePage =() => <div>Home Page</div>
const UsersPage = () => <div>Users Page</div>
const App = () => (
<Router history={browserHistory}>
<Route path="/" component={Layout}>
<IndexRoute component={HomePage} />
<Route path="/users" component={UsersPage} />
</Route>
</Router>
)
render(<App />, document.getElementById('root'))
复制
上面就是
v3
的一种集中式路由，布局和页面组件是独立的，所有组件都只是路由的一个参数。
React Router 4
开始 不再主张集中式路由了（当然可以继续使用），路由规则可以写在布局和 UI 组件之间。
以下是
v4
中的写法：
import { BrowserRouter, Route } from 'react-router-dom'
const Layout = () => (
<div className="layout-box">
<header>
React Router 4 App
</header>
<main>
<Route path="/" exact component={HomePage} />
<Route path="/users" component={UsersPage} />
</main>
</div>
)
const HomePage =() => <div>Home Page</div>
const UsersPage = () => <div>Users Page</div>
const App = () => (
<BrowserRouter>
<Layout />
</BrowserRouter>
)
render(<App />, document.getElementById('root'))
复制
v4
的写法其实更符合组件式开发的理念，路由组件可以更灵活的被使用。
最后
本文主要是简单的介绍了
v3
以后的路由理念和使用方式以及个人的理解，更多具体各个组件的使用会分为多个章节来完成，同时会配备相关的 demo。
暂定目录如下：
- BrowserRouter HashRouter 组件
- Link VS NavLink 组件
- Redirect 组件应用
- Route 组件应用
- Switch 排他性路由
- 静态路由组件 StaticRouter
- 组件匹配
- 嵌套布局
- 异步组件加载
- 其他
参考
http://www.sohu.com/a/303613138_463970 v5 升级说明
https://css-tricks.com/react-router-4/ 关于 v4的一切