原文：
All About React Router 4
示例代码
All About React Router 4 笔记
此文来自一篇英文博客，记录学习时总结的一些知识点，如有错误，请指正，谢谢！
React Router 4 带来新的API以及新的心智模型。
Inclusive Routing 引入路由
const PrimaryLayout = () => (
Our React Router 4 App
)
UsersMenu 和 UsersPage 可以通过同一个路由被渲染到当前页面中，
exact 精确匹配路由 '/'
Switch 路由组
当你需要将路由匹配到一个路由组时，使用 Switch 可以匹配到唯一路由
const PrimaryLayout = () => (
)
当使用 Switch 时，只有一个路由会被渲染。
我们仍然需要使用 exact 当设 HomePage 为首选被渲染的组件。否则等浏览到 /users 或则会使 '/users/add' 时，HomePage 组件仍然会被渲染，如果发生同时渲染，那么先渲染的组件排在最前面。
当路由匹配 /users/add 时，也会同时匹配到 /users 路由，为确保优先渲染UserAddPage 可以将这个组件写到 UsersPage 前面，如果相反，则调换顺序。
当然也可以将所有路由设置为 exact 精确匹配，这样就不存在先后问题。
Redirect 重定向
当 Switch 没有匹配到任意一个路由的时候，将会发生路由重定向。
"Index Routes" and "Not Found" （已移除）
在 V4 中不在使用
如果没有路由被匹配，可以使用 404页面
Nested Layouts 嵌套布局
这里展示两种不同的写法，以及为什么第二种是更好的写法
第一种采用 exact 精确匹配路由
const PrimaryLayout = props => {
return (
)
}
这种写法在技术上是可行的，但是问题在于，props.match 是通过 BrowseUsersPage 的子组件并不是通过 props.match的。
当然这里可以通过高阶组件的方式将子组件包装：withRouter()
第二种写法在第一种写法的基础上做了修改，通过路由嵌套的方式布局组件，并且不再需要使用 exact 精确匹配路由，也不必使用 withRouter() 加工组件。
const PrimaryLayout = () => (
);
const UserSubLayout = () => (
);
const UserSubLayout = props => (
);
Match 匹配对象
Match 对象提供了一下几种属性
- params - (object) Key/value pairs parsed from the URL corresponding to the dynamic segments of the path
- isExact - (boolean) true if the entire URL was matched (no trailing characters)
- path - (string) The path pattern used to match. Useful for building nested
s - url - (string) The matched portion of the URL. Useful for building nested s
match.path vs match.url
当路由不携带参数是两者的输出是相同的字符串，尝试打印这两者。
当路由匹配到例如 /users/5 时，match.url 将会输出 "/users/5" ; 而 match.path 输出 "/users/:userId".
Avoiding Match Collisions 避免匹配冲突
const UserSubLayout = ({ match }) => (
)
path-to-regexp 用于校验路由参数
var re = pathToRegexp('/:foo(\\d+)')
// keys = [{ name: 'foo', ... }]
re.exec('/123')
//=> ['/123', '123']
re.exec('/abc')
//=> null
Authorized Route 路由认证、权限管理
根据用户登录状态管理其浏览路由的权限是应用中很常见的功能
with the help of v4 docs
class App extends React.Component {
render() {
return (
)
}
}
可以结合 react redux设计权限管理功能，
如果是正在登录，则显示 Loading...
如果已经登录则，则跳转到到
如果未登录，则跳转到登录页
class AuthorizedRoute extends React.Component {
componentWillMount() {
getLoggedUser()
}
render() {
const { component: Component, pending, logged, ...rest } = this.props
return (
{
if (pending) return Loading...
return logged
? Other mentions 其他
vs
这两个功能一样，都是路由跳转，但是NavLink有一个属性用来显示跳转选中的样式，activeStyle属性，写显示高亮样式的，接收一个对象{}
在我们路由导航有一个to属性
to属性是我们路由的要跳转的路径:
import React from 'react'
import { NavLink } from 'react-router-dom'
const PrimaryHeader = () => (
Welcome to our app!
)
export default PrimaryHeader
Dynamic Routes 动态路由
在 V4中最好的一部分改变是可以在所有地方包含
路由将不再是神奇的东西，我们可以用在任何地方，试想一下，当满足条件时，整个路由都可以被路由到。
在这些条件不满足时，我们可以移除那些路由，甚至，可以嵌套路由。
React Router 4 变得更好用是因为这只是一个 Just Components™。