包容性路由

在前面的例子中,你可能已经注意到了 exact 这个属性。那么它是什么呢?V3 的路由规则是“排他性”的,这意味着只有一条路由将获胜。V4 的路由默认为“包含”的,这意味着多个 <Route> 可以同时进行匹配和渲染。

在上一个例子中,我们试图根据路径渲染 HomePage 或者 UsersPage。如果从示例中删除了 exact 属性,那么在浏览器中访问 /users 时,HomePage 和 UsersPage 组件将同时被渲染。

要更好地了解匹配逻辑,请查看 path-to-regexp,这是 v4 现在正在使用的,以确定路由是否匹配 URL。

为了演示包容性路由是有帮助的,我们在标题中包含一个 UserMenu,但前提是我们在应用程序的用户部分:

const PrimaryLayout = () => (
  <div className="primary-layout">
    <header>
      Our React Router 4 App
      <Route path="/users" component={UsersMenu} />
    </header>
    <main>
      <Route path="/" exact component={HomePage} />
      <Route path="/users" component={UsersPage} />
    </main>
  </div>
)

现在,当用户访问 /users 时,两个组件都会渲染。类似这样的事情在 v3 中通过特定的匹配模式也是可行的,但它更复杂。得益于 v4 的包容性路由,现在能够很轻松地实现。

 

<Route>

我们知道,Route组件主要的作用就是当一个location匹配路由的path时,渲染某些UI。示例如下:

<Router>
  <div>
    <Route exact path="/" component={Home}/>
    <Route path="/news" component={NewsFeed}/>
  </div>
</Router>

// 如果应用的地址是/,那么相应的UI会类似这个样子:
<div>
  <Home/>
</div>

// 如果应用的地址是/news,那么相应的UI就会成为这个样子:
<div>
  <NewsFeed/>
</div>

<Route>组件有如下属性:

  • path(string): 路由匹配路径。(没有path属性的Route 总是会 匹配);
  • exact(bool):为true时,则要求路径与location.pathname必须完全匹配;
  • strict(bool):true的时候,有结尾斜线的路径只能匹配有斜线的location.pathname;

再次奉上两个鲜活的例子:

exact配置:

路径 location.pathname exact 是否匹配
/one /one/two true
/one /one/two false

作者:桂圆_noble
链接:http://www.jianshu.com/p/6a45e2dfc9d9
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。