溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

React路由管理之React Router總結(jié)

發(fā)布時(shí)間：2020-10-14 22:02:51 來(lái)源：腳本之家 閱讀：328 作者：浩時(shí)代 欄目：web開發(fā)

React項(xiàng)目通常都有很多的URL需要管理，最常使用的解決方案就是React Router了，最近學(xué)習(xí)了一下，主要是看了一下官方的英文文檔，加以總結(jié)，以備后查。

React Router是做什么的呢，官方的介紹是：

A complete routing library for React，keeps your UI in sync with the URL. It has a simple API with powerful features like lazy code loading, dynamic route matching, and location transition handling built right in. Make the URL your first thought, not an after-thought.

大意即：讓UI組件和URL保持同步,通過(guò)簡(jiǎn)單的API即可實(shí)現(xiàn)強(qiáng)大的特性如：代碼懶加載，動(dòng)態(tài)路由匹配，路徑過(guò)渡處理等。

下面是一些React Router的用法：

一 簡(jiǎn)單渲染Route

有一點(diǎn)需要牢記于心，Router 是作為一個(gè)React組件，可以進(jìn)行渲染。

// ...
import { Router, Route, hashHistory } from 'react-router'

render((
 <Router history={hashHistory}>
  <Route path="/" component={App}/>
 </Router>
), document.getElementById('app'))

這里使用了hashHistory - 它管理路由歷史與URL的哈希部分。

添加更多的路由，并指定它們對(duì)應(yīng)的組件

import About from './modules/About'
import Repos from './modules/Repos'

render((
 <Router history={hashHistory}>
  <Route path="/" component={App}/>
  <Route path="/repos" component={Repos}/>
  <Route path="/about" component={About}/>
 </Router>
), document.getElementById('app'))

二 Link

// modules/App.js
import React from 'react'
import { Link } from 'react-router'

export default React.createClass({
 render() {
  return (
   <div>
    <h2>React Router Tutorial</h2>
    <ul role="nav">
     <li><Link to="/about">About</Link></li>
     <li><Link to="/repos">Repos</Link></li>
    </ul>
   </div>
  )
 }
})

這里使用了Link 組件，它可以渲染出鏈接并使用 to 屬性指向相應(yīng)的路由。

三 嵌套路由

如果我們想添加一個(gè)導(dǎo)航欄，需要存在于每個(gè)頁(yè)面上。如果沒有路由器，我們就需要封裝一個(gè)一個(gè)nav組件，并在每一個(gè)頁(yè)面組件都引用和渲染。隨著應(yīng)用程序的增長(zhǎng)代碼會(huì)顯得很冗余。React-router則提供了另一種方式來(lái)嵌套共享UI組件。

實(shí)際上，我們的app都是一系列嵌套的盒子，對(duì)應(yīng)的url也能夠說(shuō)明這種嵌套關(guān)系：

<App>    {/* url /     */}
 <Repos>  {/* url /repos   */}
  <Repo/> {/* url /repos/123 */}
 </Repos>
</App>

因此，可以通過(guò)把子組件嵌套到 公共組件 App上使得 App組件上的 導(dǎo)航欄 Nav 等公共部分能夠共享：

// index.js
// ...
render((
 <Router history={hashHistory}>
  <Route path="/" component={App}>
   {/* 注意這里把兩個(gè)子組件放在Route里嵌套在了App的Route里/}
   <Route path="/repos" component={Repos}/>
   <Route path="/about" component={About}/>
  </Route>
 </Router>
), document.getElementById('app'))

接下來(lái)，在App中將children渲染出來(lái)：

// modules/App.js
// ...
 render() {
  return (
   <div>
    <h2>React Router Tutorial</h2>
    <ul role="nav">
     <li><Link to="/about">About</Link></li>
     <li><Link to="/repos">Repos</Link></li>
    </ul>

    {/* 注意這里將子組件渲染出來(lái) */}
    {this.props.children}

   </div>
  )
 }
// ...

四 有效鏈接

Link組件和a標(biāo)簽的不同點(diǎn)之一就在于Link可以知道其指向的路徑是否是一個(gè)有效的路由。

<li><Link to="/about" activeStyle={{ color: 'red' }}>About</Link></li>
<li><Link to="/repos" activeStyle={{ color: 'red' }}>Repos</Link></li>

可以使用 activeStyle 指定有效鏈接的樣式，也可以使用activeClassName指定有效鏈接的樣式類。

大多數(shù)時(shí)候，我們并不需要知道鏈接是否有效，但在導(dǎo)航中這個(gè)特性則十分重要。比如：可以在導(dǎo)航欄中只顯示合法的路由鏈接。

// modules/NavLink.js
import React from 'react'
import { Link } from 'react-router'

export default React.createClass({
 render() {
  return <Link {...this.props} activeClassName="active"/>
 }
})

// modules/App.js
import NavLink from './NavLink'

// ...

<li><NavLink to="/about">About</NavLink></li>
<li><NavLink to="/repos">Repos</NavLink></li>

可以在NavLink中指定只有 .active 的鏈接才顯示，這樣如果路由無(wú)效，則該鏈接就不會(huì)出現(xiàn)在導(dǎo)航欄中了。

五 URL參數(shù)

考慮下面的url：

/repos/reactjs/react-router
/repos/facebook/react

他們可能對(duì)應(yīng)的是這種形式：

/repos/:userName/:repoName

：后面是可變的參數(shù)

url中的可變參數(shù)可以通過(guò) this.props.params[paramsName] 獲取到：

// modules/Repo.js
import React from 'react'

export default React.createClass({
 render() {
  return (
   <div>
{/* 注意這里通過(guò)this.props.params.repoName 獲取到url中的repoName參數(shù)的值 */}
    <h3>{this.props.params.repoName}</h3>
   </div>
  )
 }
})


// index.js
// ...
// import Repo
import Repo from './modules/Repo'

render((
 <Router history={hashHistory}>
  <Route path="/" component={App}>
   <Route path="/repos" component={Repos}/>
   {/* 注意這里的路徑 帶了 ：參數(shù) */}
   <Route path="/repos/:userName/:repoName" component={Repo}/>
   <Route path="/about" component={About}/>
  </Route>
 </Router>
), document.getElementById('app'))

接下來(lái)訪問 /repos/reactjs/react-router 和 /repos/facebook/react 就會(huì)看到不同的內(nèi)容了。

六 默認(rèn)路由

// index.js
import { Router, Route, hashHistory, IndexRoute } from 'react-router'
// and the Home component
import Home from './modules/Home'

// ...

render((
 <Router history={hashHistory}>
  <Route path="/" component={App}>

   {/* 注意這里* /}
   <IndexRoute component={Home}/>

   <Route path="/repos" component={Repos}>
    <Route path="/repos/:userName/:repoName" component={Repo}/>
   </Route>
   <Route path="/about" component={About}/>
  </Route>
 </Router>
), document.getElementById('app'))

這里添加了IndexRoute來(lái)指定默認(rèn)的路徑 / 所對(duì)應(yīng)的組件。注意它沒有path屬性值。

同理也有 默認(rèn)鏈接組件 IndexLink。、

七 使用Browser History

前面的例子一直使用的是hashHistory，因?yàn)樗恢笨梢赃\(yùn)行，但更好的方式是使用Browser History，它可以不依賴哈希端口 （#）。

首先需要改 index.js:

// ...
// bring in `browserHistory` instead of `hashHistory`
import { Router, Route, browserHistory, IndexRoute } from 'react-router'

render((
{/* 注意這里 */}
 <Router history={browserHistory}>
  {/* ... */}
 </Router>
), document.getElementById('app'))

其次需要 修改webpack的本地服務(wù)配置，打開 package.json 添加 –history-api-fallback ：

復(fù)制代碼 代碼如下:
"start": "webpack-dev-server --inline --content-base . --history-api-fallback"

最后需要在 index.html中 將文件的路徑改為相對(duì)路徑：

<!-- index.html -->
<!-- index.css 改為 /index.css -->
<link rel="stylesheet" href="/index.css" rel="external nofollow" >

<!-- bundle.js 改為 /bundle.js -->
<script src="/bundle.js"></script>

這樣就去掉了url中的 # 。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手