使用React Router v4案例解析（附程式碼）

這次帶給大家使用React Router v4案例解析（附程式碼），使用React Router v4案例解析的注意事項有哪些，以下就是實戰案例，一起來看一下。

距離React Router v4 正式發布也已經過去三個月了，這週把一個React的架子做了升級，之前的路由用的還是v2.7.0版的，所以決定把路由也升級下，正好「嚐嚐鮮」...

江湖傳言，目前官方同時維護2.x 和4.x 兩個版本。 （ヾ(｡ꏿ﹏ꏿ)ﾉﾞ咦，此刻相信機智如我的你也會發現，ReactRouter v3 去哪兒了？整丟了？？巴拉出鍋了？？？？解釋！？）事實上3.x 版本相比於2.x 並沒有引入任何新的特性，只是將2.x 版本中部分廢棄API 的warning 移除掉而已。依照規劃，沒有歷史包袱的新專案想要使用穩定版的 ReactRouter 時，應該使用 ReactRouter 3.x。目前 3.x 版本也還處於 beta 階段，不過會先於 4.x 版本正式發布。如果你已經在使用 2.x 的版本，那麼升級 3.x 將不會有任何額外的程式碼變更。

禮貌性簡介下

#React Router V4 相較於前面三個版本有根本性變化，首先是遵循Just Component 的API 設計理念，其次API方面也精簡了不少，對新手來說降低了學習難度，但如果是對先前專案的重構，嗯，簡直無**可說。本升級的主要特點如下：

• 聲明式（Declarative）

• 可組合（Composability）

##React Router V4 遵循了React 的理念：
3. 萬物皆組件

   。因此 升級之後的 Route、Link、Switch等都是一個普通的元件。

React Router V4 基於 Lerna 管理多個 Repository。在此程式碼庫包括：
react-router React Router 核心
react-router-dom 用於DOM 綁定的React Router

react-router-native 用於React Native 的React Router

react-router-redux React Router 和Redux 的整合react-router-config 靜態路由設定幫助助手#外掛程式初引入##通常我們在React 的使用中，一般要引入兩個包， react 和  react-dom ，那麼react-router

和

react-router-dom#是不是兩個都要引用呢？ 注意，前方高能，入門第一坑就在這裡

。他們兩個只要引用一個就行了，不同之處就是後者比前者多出了

<Link> 這樣的 DOM 類別元件。因此我們只要引用 react-router-dom 這個套件就OK了。當然，如果搭配 redux ，你還需要使用 react-router-redux 。 主要元件簡介

在4.0之前版本的API 中，

<Router>

元件的children 只能是React Router 提供的各種組件，如

<Route>、、<Redirect>
1. 等。而在React Router 4 中，你可以將各種元件及標籤放進

   <Router> 元件中，他的角色也更像是Redux 中的

   。 **不同的是
2. 是用來保持與 store 的更新，而

   <Router> 是用來保持與 location 的同步。 **範例如下：

   // 示例1
   <Router>
    <p>
     <ul>
     <li><Link to="/">首页</Link></li>
     <li><Link to="/about">关于</Link></li>
     <li><Link to="/topics">主题列表</Link></li>
     </ul>
     <hr/>
     <Route exact path="/" component={Home}/>
     <Route path="/about" component={About}/>
     <Route path="/topics" component={Topics}/>
    </p>
    </Router>

   Router是所有路由元件共用的底層接口，一般我們的應用並不會使用這個接口，而是使用高級的路由：

3. ：使用HTML5 提供的history API 來保持UI 和URL 的同步;

4. ：使用URL 的hash (例如：window.location.hash) 來保持UI 和URL 的同步；################# ：能在記憶體中保存你“ URL」的歷史紀錄(並沒有對網址列讀寫)；################## ：為使用React Native提供路由支援；###

5. <StaticRouter> ：从不会改变地址；

TIPS：算是第二坑吧，和之前的Router不一样，这里 <Router> 组件下只允许存在一个子元素，如存在多个则会报错。

反面典型在这里：

<Router>
  <ul>
  <li><Link to="/">首页</Link></li>
  <li><Link to="/about">关于</Link></li>
  <li><Link to="/topics">主题列表</Link></li>
  </ul>
  <hr/>
  <Route exact path="/" component={Home}/>
  <Route path="/about" component={About}/>
  <Route path="/topics" component={Topics}/>
 </Router>

没错，示例2在没有 <p> 爸爸的保护下，会报如下异常信息：

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

<Router>
 <p>
 <Route exact path="/" component={Home}/>
 <Route path="/news" component={NewsFeed}/>
 </p>
</Router>
// 如果应用的地址是/,那么相应的UI会类似这个样子：
<p>
 <Home/>
</p>
// 如果应用的地址是/news,那么相应的UI就会成为这个样子：
<p>
 <NewsFeed/>
</p>

<Route> 组件有如下属性：

1. path（string）: 路由匹配路径。（没有path属性的Route 总是会 匹配）；

2. exact（bool）：为true时，则要求路径与location.pathname必须完全匹配；

3. strict（bool）：true的时候，有结尾斜线的路径只能匹配有斜线的location.pathname；

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

exact配置：

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

 strict配置：

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

同时，新版的路由为 <Route> 提供了三种渲染内容的方法：

1. <Route component> ：在地址匹配的时候React的组件才会被渲染，route props也会随着一起被渲染；

2. <Route render> ：这种方式对于内联渲染和包装组件却不引起意料之外的重新挂载特别方便；

3. <Route children> ：与render属性的工作方式基本一样，除了它是不管地址匹配与否都会被调用；

第一种方式没啥可说的，和之前一样，这里我们重点看下 <Route render> 的渲染方式：

// 行内渲染示例
<Route path="/home" render={() => <p>Home</p>}/>
// 包装/合成
const FadingRoute = ({ component: Component, ...rest }) => (
 <Route {...rest} render={props => (
 <FadeIn>
  <Component {...props}/>
 </FadeIn>
 )}/>
)
<FadingRoute path="/cool" component={Something}/>

TIPS: 第三坑！ <Route component> 的优先级要比 <Route render> 高，所以不要在同一个 <Route> 中同时使用这两个属性。

和之前版本没太大区别，重点看下组件属性：

1. to（string/object）：要跳转的路径或地址；

2. replace（bool）： 为 true 时 ，点击链接后将使用新地址替换掉访问历史记录里面的原地址； 为 false 时 ，点击链接后将在原有访问历史记录的基础上添加一个新的纪录。 默认为 false ；

示例如下：

// Link组件示例
// to为string
<Link to="/about">关于</Link>
// to为obj
<Link to={{
 pathname: &#39;/courses&#39;,
 search: &#39;?sort=name&#39;,
 hash: &#39;#the-hash&#39;,
 state: { fromDashboard: true }
}}/>
// replace 
<Link to="/courses" replace />

<NavLink> 是 <Link> 的一个特定版本, 会在匹配上当前 URL 的时候会给已经渲染的元素添加样式参数，组件属性：

1. activeClassName（string）：设置选中样式，默认值为 active；

2. activeStyle（object）：当元素被选中时, 为此元素添加样式；

3. exact（bool）：为 true 时, 只有当地址完全匹配 class 和 style 才会应用；

4. strict（bool）：为 true 时，在确定位置是否与当前 URL 匹配时，将考虑位置 pathname 后的斜线； isActive（func）：判断链接是否激活的额外逻辑的功能；

从这里我们也可以看出，新版本的路由在组件化上面确实下了不少功夫，来看看NavLink的使用示例：

// activeClassName选中时样式为selected
<NavLink
 to="/faq"
 activeClassName="selected"
>FAQs</NavLink>
// 选中时样式为activeStyle的样式设置
<NavLink
 to="/faq"
 activeStyle={{
 fontWeight: &#39;bold&#39;,
 color: &#39;red&#39;
 }}
>FAQs</NavLink>
// 当event id为奇数的时候，激活链接
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>

该组件用来渲染匹配地址的第一个 <Route> 或者 <Redirect> 。那么它与使用一堆route又有什么区别呢？

<Switch> 的独特之处是独它仅仅渲染一个路由。相反地，每一个包含匹配地址(location)的 <Route> 都会被渲染。思考下面的代码：

<Route path="/about" component={About}/>
<Route path="/:user" component={User}/>
<Route component={NoMatch}/>

如果现在的URL是 /about ，那么 <About> , <User> , 还有 <NoMatch> 都会被渲染，因为它们都与路径(path)匹配。这种设计，允许我们以多种方式将多个 <Route> 组合到我们的应用程序中，例如侧栏(sidebars)，面包屑(breadcrumbs)，bootstrap tabs等等。 然而，偶尔我们只想选择一个 <Route> 来渲染。如果我们现在处于 /about ，我们也不希望匹配 /:user （或者显示我们的 “404” 页面 ）。以下是使用 Switch 的方法来实现：

<Switch>
 <Route exact path="/" component={Home}/>
 <Route path="/about" component={About}/>
 <Route path="/:user" component={User}/>
 <Route component={NoMatch}/>
</Switch>

现在，如果我们处于 /about ， <Switch> 将开始寻找匹配的 <Route> 。 <Route path="/about"/> 将被匹配， <Switch> 将停止寻找匹配并渲染 <About> 。同样，如果我们处于 /michael ， <User> 将被渲染。

<p>相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

<p>推荐阅读：

<p>正则中句号使用范畴有哪些

<p>JS使用createElement()动态添加HTML

以上是使用React Router v4案例解析（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！