React-Router v4
1. 设计理念
React-Router v4 的核心思想是 “动态路由”，它是相对于 “静态路由” 提出的设计概念。
何为静态路由？在服务器端所有的路由都是在设计过程已经规划完成。在许多客户端框架中也遵循了上述思路，即在页面渲染之前先规划好路由，将路由导入到顶层的模块中。但这种理念在 React-Router 中不再适用，作者希望在学习 React-Router 之前放弃 “静态路由” 设计思路。
1.1. 动态路由
在 React-Router 中的所有设置都是组件，因此路由是随着应用的渲染被同时计算得到，而不是独立于应用之外。为了解释这个理念我们首先学习 React-Router 在应用中的使用,
-
将 React-Router 的组件声明到应用顶层：
import { BrowserRouter } from 'react-router-dom' ReactDOM.render(( <BrowserRouter> <App/> </BrowserRouter> ), el) -
使用 link 组件指向相应的位置：
const App = () => ( <div> <nav> <Link to="/dashboard">Dashboard</Link> </nav> </div> ) -
最后利用 Route 组件关联位置与显示 UI：
const App = () => ( <div> <nav> <Link to="/dashboard">Dashboard</Link> </nav> <div> <Route path="/dashboard" component={Dashboard}/> </div> </div> )
如果用户访问 /dashboard ， Route 组件会将路由形式的对象 {match, location, history} 作为属性参数传给<Dashboard {...props}> 组件进行渲染，否则不会渲染。
到此为止，似乎与 “静态路由” 的概念没有区别，但是不要忘记 Route 是一个组件，这就意味着 Route 组件是否渲染和其中的 path 和 component 都可以由父组件的状态或属性进行设置。
1.2. 嵌套路由
在动态路由中配置嵌套路由就好像 div 标签中嵌套一个 div ， 因为 Route 就是一个组件标签。
const App = () => (
<BrowserRouter>
{/* 这里是 div 标签*/}
<div>
{/* 这里是 Route 组件标签*/}
<Route path="/tacos" component={Tacos}/>
</div>
</BrowserRouter>
)
// 当 url 匹配 /tacos 时， 该组件被渲染
const Tacos = ({ match }) => (
// 这是嵌套的 div 标签
<div>
{/* 这是嵌套的 Route 组件标签,
match.url 用以实现相对路径 */}
<Route
path={match.url + '/carnitas'}
component={Carnitas}
/>
</div>
)
1.3. 响应式路由
利用动态路由理念很容易在 React-Native 中实现响应式的布局。
const App = () => (
<AppLayout>
<Route path="/invoices" component={Invoices}/>
</AppLayout>
)
const Invoices = () => (
<Layout>
{/* always show the nav */}
<InvoicesNav/>
<Media query={PRETTY_SMALL}>
{screenIsSmall => screenIsSmall
// small screen has no redirect
? <Switch>
<Route exact path="/invoices/dashboard" component={Dashboard}/>
<Route path="/invoices/:id" component={Invoice}/>
</Switch>
// large screen does!
: <Switch>
<Route exact path="/invoices/dashboard" component={Dashboard}/>
<Route path="/invoices/:id" component={Invoice}/>
<Redirect from="/invoices" to="/invoices/dashboard"/>
</Switch>
}
</Media>
</Layout>
)
2. 快速入门
首先给出官方的基础案例：
import React from 'react'
import {
BrowserRouter as Router,
Route,
Link
} from 'react-router-dom'
// 三个基础呈现组件
const Home = () => (
<div>
<h2>Home</h2>
</div>
)
const About = () => (
<div>
<h2>About</h2>
</div>
)
const Topic = ({ match }) => (
<div>
<h3>{match.params.topicId}</h3>
</div>
)
// 一个内嵌的组件
const Topics = ({ match }) => (
<div>
<h2>Topics</h2>
<ul>
<li>
<Link to={`${match.url}/rendering`}>
Rendering with React
</Link>
</li>
<li>
<Link to={`${match.url}/components`}>
Components
</Link>
</li>
<li>
<Link to={`${match.url}/props-v-state`}>
Props v. State
</Link>
</li>
</ul>
<Route path={`${match.url}/:topicId`} component={Topic}/>
<Route exact path={match.url} render={() => (
<h3>Please select a topic.</h3>
)}/>
</div>
)
// 首页组件
const BasicExample = () => (
<Router>
<div>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/topics">Topics</Link></li>
</ul>
<hr/>
<Route exact path="/" component={Home}/>
<Route path="/about" component={About}/>
<Route path="/topics" component={Topics}/>
</div>
</Router>
)
export default BasicExample
随后分析上例给出的三个 React-Router 组件，分别是 <BrowserRouter>， <Route>， <Link> 。
2.1. <BrowserRouter>
这是一个路由管理器，使用 HTML5 的 history API （pushState, replaceState, popState） 同步访问 URL 和组件。具体声明如下：
import { BrowserRouter } from 'react-router-dom'
<BrowserRouter
basename={optionalString}
forceRefresh={optionalBool}
getUserConfirmation={optionalFunc}
keyLength={optionalNumber}
>
<App/>
</BrowserRouter>
2.1.1. basename: string
应用的根目录，如果你的应用只是整个服务中的子服务，仅适应于某个子目录，那么就应该设置这个参数。
<BrowserRouter basename="/calendar"/>
<Link to="/today"/> // renders <a href="/calendar/today">
2.2. <Link>
该组件用以声明应用的链接（导航）
import { Link } from 'react-router-dom'
<Link to="/about">About</Link>
2.2.1. to: string || object
定义需要导航的路径。
<Link to="/courses"/>
<Link to={{
pathname: '/courses',
search: '?sort=name',
hash: '#the-hash',
state: { fromDashboard: true }
}}/>
2.2.2. replace: bool
如果该选项设置为 true，当你点击链接时，会在 history 栈中取代当前的状态路径而不是添加一个新状态路径。
2.3. <Route>
这是 React-Router 中最重要的组件了，当请求的状态路径与该组件给出的 path 一致时，会渲染所对应的 UI 组件。
import { BrowserRouter as Router, Route } from 'react-router-dom'
<Router>
<div>
<Route exact path="/" component={Home}/>
<Route path="/news" component={NewsFeed}/>
</div>
</Router>
在 <Route> 组件中有三种渲染方式：
<Route component><Route render><Route children>
每一种方式都会传入相同形式的路由属性 —— {match, location, history} 。
2.3.1. component
使用 component 渲染方式时，React 会自动将所对应的组件转化为 React 组件，因此如果所对应组件是内联函数形式，请使用 render 或 children 渲染方式，避免每次都生成新的 React 组件。
<Route path="/user/:username" component={User}/>
2.3.2. render: func
该方式取代了React 生成组件的过程，而是直接执行一个函数，此外还经常用于路由的打包。
// 直接执行函数
<Route path="/home" render={() => <div>Home</div>}/>
// 打包路由
const FadingRoute = ({ component: Component, ...rest }) => (
<Route {...rest} render={props => (
<FadeIn>
<Component {...props}/>
</FadeIn>
)}/>
)
<FadingRoute path="/cool" component={Something}/>
2.3.3. children: func
有时无论路径是否匹配都要渲染组件，这种情况下使用 children 渲染方式，它和 render 方式类似只是多了一个匹配过程。
<ul>
<ListItemLink to="/somewhere"/>
<ListItemLink to="/somewhere-else"/>
</ul>
const ListItemLink = ({ to, ...rest }) => (
<Route path={to} children={({ match }) => (
<li className={match ? 'active' : ''}>
<Link to={to} {...rest}/>
</li>
)}/>
)
注意： component 和 render 方式都优先于 children 方式，因此无法在一个 <Route> 组件中同时使用。
2.3.4. path: string
一个符合正则的有效 URL 路径，当 Route 中没有 path 时，该路由总是匹配 。
<Route path="/users/:id" component={User}/>
2.3.5. exact: bool
完全匹配的选项。
<Route exact path="/one" component={About}/>
完全匹配的逻辑：
| path | location.pathname | exact | matches? |
|---|---|---|---|
| /one | /one/two | true | no |
| /one | /one/two | false | yes |
2.4. history
与 <Route> 组件相关的还有三个对象，分别是 history，match， location。在这节中我们先来了解 history 这个可变对象。
history 是 React-Router 极少的依赖模块之一，它主要作用是在不同的环境下管理会话。经常会使用到的 history 有：
-
browser history：DOM 的具体应用，支持 HTML5 的 history API。 -
hash history：DOM 的具体应用，用以兼容老版本的浏览器。 -
memory history：在无 DOM 或测试环境下通过内存方式处理来实施，适合 React-Native。
和history 对象相关的主要属性和方法有：
-
length：history 栈中的状态路径个数。 -
action：当前的操作，字符串形式（PUSH, REPLACE, POP） -
location：当前的状态路径。-
pathname： URL 路径字段 -
search：URL 查询字段 -
hash：URL 的 hash 字段 -
state：路径的状态，只在 browser 和 memory history 中有效。
-
-
push(path, [state])：将状态路径压入 history 栈。 -
replace(path, [state])：替换当前的状态路径。 -
go(n)：向前移动当前指针 n 次。 -
goBack()：go(-1) -
goForward()：go(1) -
block(prompt)：暂时阻止导航（“您确定离开”）。
history 是可变的，因此状态路径的访问方式推荐使用 <Route> 的属性（props）里间接获取，而不是直接使用 history.location。这可以保证在 React 生存周期里能够获得正确的比较。
class Comp extends React.Component {
componentWillReceiveProps(nextProps) {
// 返回 true
const locationChanged = nextProps.location !== this.props.location
// 错误，总是 false，因为 history 是可变的。
const locationChanged = nextProps.history.location !== this.props.history.location
}
}
<Route component={Comp}/>
2.5. location
在本文中我一直称之为状态路径，意思很明显就是具有状态的路径。该对象的与 url 对应，其具体属性如下：
{
key: 'ac3df4', // not with HashHistory!
pathname: '/somewhere'
search: '?some=search-string',
hash: '#howdy',
state: {
[userDefined]: true
}
}
状态路径会在以下几个位置由 React-Router 给出：
- Route component 由 this.props.location 给出
-
Route render 由
({location}) => ()给出 -
Route children 由
({location}) => ()给出 - withRouter 由 this.props.location 给出
你也可以在这几个位置定义状态路径：
- Link to
- Redirect to
- history.push
- history.replace
状态路径中的状态可用于 UI 分支的显示等情景。你也可以通过 <Route> 和 <Switch> 组件传递状态路径，这在动画显示和延迟导航中非常有用。
2.6. match
match 对象用以描述 <Route path> 匹配 URL 的结果，其实就是 <Route> 组件的 state ，<Route> 组件根据 match 对象进行状态转换，主要的属性有：
-
params：键值对对象对应正则模式中的参数字段。 -
isExact：是否完全匹配。 -
path：匹配使用的正则模式。 -
url：所匹配的 URL 路径字段。
可以在下面位置访问该对象，意味着将 <Route> 的 state 传递为子组件的 props：
- Route component 由 this.props.match 给出
- Route render 由 ({match}) => () 给出
- Route children 由 ({match}) => () 给出
- withRouter 由 this.props.match 给出
如果路由中没有 path，将匹配所有路径， match 对象就是其父对象的 match。
3. API 查漏补缺
官方教程中给出了许多实例，如果了解了上述 API 大部分代码都能看懂，还有一些 API 主要是增强使用的，为程序员在编程中提供了更多选择和便利。
3.1. <Redirect>
执行 <Redirect> 将会使应用导航到一个新的位置，同时在 history 栈中新位置替换当前位置。因为是替换操作所以在 <Redirect> 中通常会使用状态路径，并在状态路径中记录当前位置，以实现回溯路径的操作。
import { Route, Redirect } from 'react-router'
<Route exact path="/" render={() => (
loggedIn ? (
<Redirect to="/dashboard"/>
) : (
<PublicHomePage/>
)
)}/>
3.1.1. to: string || object
重定向的位置。
3.1.2. push: bool
该属性为 true 时，history 栈的操作不再是替换操作而是压入新的位置元素。
<Redirect push to="/somewhere/else"/>
3.1.3. from: string
表明从那个位置进行重定向操作的。该属性只有在 <Switch> 组件中才有效。实际上该属性就是 <Route> 组件中 path 属性的别称，与此同理还可以使用 exact， strict， path。
<Switch>
<Redirect from='/old-path' to='/new-path'/>
<Route path='/new-path' component={Place}/>
</Switch>
3.2. <Switch>
组件和语法中的 switch 功能类似，执行第一个匹配的路由。这个逻辑很直观也就是排他性，主要解决使用多个 <Route> 时多个路由同时匹配的问题。
<Route path="/about" component={About}/>
<Route path="/:user" component={User}/>
<Route component={NoMatch}/>
如果 URL 是 /about ，那么上述三个路由都匹配，此时希望只有第一个路由渲染，就需要使用 <Switch> 组件了：
import { Switch, Route } from 'react-router'
<Switch>
<Route exact path="/" component={Home}/>
<Route path="/about" component={About}/>
<Route path="/:user" component={User}/>
<Route component={NoMatch}/>
</Switch>
3.2.1. location: object
如果 <Switch> 组件中给出了 location 属性，子元素将不再与当前位置或 URL 进行匹配操作，而是与该属性进行匹配，并且匹配的子元素的 location 值将被覆盖为 <Switch> 的 location 属性值。
3.2.2. children: node
在 <Switch> 组件中子元素可以是 <Route> 和 <Redirect> 组件， <Route> 使用 path 属性进行匹配，而 <Redirect> 使用 from 属性进行匹配。
<Switch>
<Route exact path="/" component={Home}/>
<Route path="/users" component={Users}/>
<Redirect from="/accounts" to="/users"/>
<Route component={NoMatch}/>
</Switch>
3.3. <NavLink>
特殊的 <Link> 组件，主要作用是实现导航栏。
activeClassName: string
当链接激活时的类名，默认是 active 。
activeStyle: object
链接激活时的样式。
<NavLink
to="/faq"
activeStyle={{
fontWeight: 'bold',
color: 'red'
}}
>FAQs</NavLink>
isActive: func
在链接匹配的基础上添加逻辑以决定是否该链接激活。
// only consider an event active if its event id is an odd number
const oddEvent = (match, location) => {
if (!match) {
return false
}
const eventID = parseInt(match.params.eventID)
return !isNaN(eventID) && eventID % 2 === 1
}
<NavLink
to="/events/123"
isActive={oddEvent}
>Event 123</NavLink>
其他属性 exact, strict, location 参考 <Link> 。
