[译]不配置，不出事？Router Router v4那些坑（其一）

原文

文中的一些名词
路径(path)：指route上的参数path
路径名(pathname)：指location的路径名

React Router 4与前代相比最大的变化莫过于其再也不须要配置。相对的，应用服务为自身的"配置"，并肯定渲染时该呈现的内容。这种新方式通畅运做良好，但仍是可能跳坑的。

对比

首先咱们来回顾一下先前和如今的版本的工做流程上的区别。

旧版本

以前，咱们须要配置一系列路由。你能够自行定义对象来配置，也能够经过<Route>组件来构建。

<Router routes={{ path: '/', component: App, children: [...]}/>
// or
<Router>
  <Route path='/' component={App}>
    ...
  </Route>
</Router>

<Route>看似一个真正的组件，实则为其参数服务。
当你写出以下代码：

<Route path='/' component={App}>
  <Route path='about' component={About}/>
</Route>

其实他等价于

React.createElement(
  Route,
  { path: '/', component: App },
  React.createElement(Route, { path: 'about', component: About })
)

React Router只关心从React元素中得到的属性。

{
  path: '/',
  component: App,
  children: [
    { path: 'about', component: About}
  ]
}

一旦location变化，React Router会遍历配置对象，来肯定新location匹配的路径。为了执行后续操做（如获取数据，加载异步组件，限制访问时的重定向），将会为路由调用enter/update/exit方法。最终，对于匹配的路径，依据路由的component参数来建立React元素。在当前路径下，全部元素将被组合在一块儿（经过this.props.children）并渲染出来。

如今的方式

第4代中，<Route>是一个真正的组件。当应用渲染时，路由（route）会将本身的路径（path）与当前location的路径名进行比较。若是匹配上，调用<Route>的render方法返回React元素，若是不匹配，则返回null。

<Route path='/here' component={Here} />
// { pathname: "/here" }
return React.createElement(Here, { history, match, location })
// { pathname: "/elsewhere" }
return null

定义子路由时，子路由须要被放置在一个由父路由渲染的组件中（[[译注意]怎么都以为拗口，看代码就清楚了）

const Child = () => <div>Child component</div>
const Parent = () => (
  <div>
    <h2>Parent component</h2>
    <Route path='/parent/child' component={Child}/>
  </div>
)
ReactDOM.render((
  <BrowserRouter>
    <Route path='/parent' component={Parent}/>
  </BrowserRouter>
), holder)

经过使用<Switch>组件，来建立分支点，这些点中只有一个的路由能匹配。这常被用于有多个路径能够匹配中同一个路径名或须要一个'miss'组件对路径所有匹配不上的状况做处理。

即使不须要处理上述的情形，将路由放置于<Switch>组件中也是一个好方法，其既能够保持路由逻辑又能够获得更明晰的DOM结构。

<Switch>
  <Route path='/the-good' component={Good}/>
  <Route path='/the-bad' component={Bad}/>
  <Route path='/the-ugly' component={Ugly}/>
</Switch>

React的生命周期方法能够处理任意的enter/exit/update 调用。componentWillMount或componentDidMount将处理enter，componentWillUpdate 或componentDidUpdate将处理update，componentWillUnmount将处理exit。

区别

4代的方式大大简化了应用开发。经过React Router构建应用与常规React构建极其类似。有些内容你但愿在特定的location下展现，你能够将其放置于<Route>中。（从无路由的React应用能够轻松改形成支持路由的应用）

然而无集中配置也纯在一些问题。在你在渲染前须要确认被匹配的路由时，你会踩坑的。会出现如下问题：

1. 全局的404页面

2. (批量) 数据获取

3. 带有异步组件的服务端渲染

对于上述问题，一个路由配置能够执行额外的步骤，以保证应用的正确渲染。

当"控制环节"在渲染步骤进行时，就不存在匹配路由与渲染她们的缓存区。这并不意味这些问题都被搞定了，这是变了个花样罢了。

解决方法

在后续的章节，咱们会介绍在这些情形下，如何使用React Router v4去分析。他们并不必定给你解决方案，但能够为你指出正确的方向。请记住React Router v4还刚发布不久。在不少方面它确实能作到开箱即用，但它也不是能适应全部场景的"万能"库。幸运的事，React拥有一个至关活跃的社区，并有不少人使用React Router。虽然须要一些时日，可是随着愈来愈多的人使用React Router v4，将会有更多不一样的解决方案被提出。若是你想出了一个好的解决方案，请把它分享出来。