1. 程式人生 > >React路由管理之React Router總結

React路由管理之React Router總結

React Router是做什麼的呢,官方的介紹是:讓UI元件和URL保持同步,通過簡單的API即可實現強大的特性如:程式碼懶載入,動態路由匹配,路徑過渡處理等。

下面是一些React Router的用法:
簡單渲染Route
有一點需要牢記於心,Router 是作為一個React元件,可以進行渲染。

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

這裡使用了hashHistory - 它管理路由歷史與URL的雜湊部分。
新增更多的路由,並指定它們對應的元件

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>
    <h1>React Router Tutorial</h1>
    <ul role="nav">
     <li><Link to="/about">About</Link></li>
     <li><Link to="/repos">Repos</Link></li>
    </ul>
   </div>
  )//歡迎加入全棧開發交流圈一起學習交流:864305860
 }//面向1-3年前端人員
})//幫助突破技術瓶頸,提升思維能力

這裡使用了Link 元件,它可以渲染出連結並使用 to 屬性指向相應的路由。

巢狀路由
如果我們想新增一個導航欄,需要存在於每個頁面上。如果沒有路由器,我們就需要封裝一個一個nav元件,並在每一個頁面元件都引用和渲染。隨著應用程式的增長程式碼會顯得很冗餘。React-router則提供了另一種方式來巢狀共享UI元件。
實際上,我們的app都是一系列巢狀的盒子,對應的url也能夠說明這種巢狀關係:

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

因此,可以通過把子元件巢狀到 公共元件 App上使得 App元件上的 導航欄 Nav 等公共部分能夠共享:

// index.js
// ...
render((
 <Router history={hashHistory}>
  <Route path="/" component={App}>
   {/* 注意這裡把兩個子元件放在Route裡巢狀在了App的Route裡/}
   <Route path="/repos" component={Repos}/>
   <Route path="/about" component={About}/>
  </Route>
 </Router>//歡迎加入全棧開發交流圈一起學習交流:864305860
), document.getElementById('app'))

接下來,在App中將children渲染出來:

// modules/App.js
// ...
 render() {
  return (
   <div>
    <h1>React Router Tutorial</h1>
    <ul role="nav">
     <li><Link to="/about">About</Link></li>
     <li><Link to="/repos">Repos</Link></li>
    </ul>
    {/* 注意這裡將子元件渲染出來 */}
    {this.props.children}
   </div>//歡迎加入全棧開發交流圈一起學習交流:864305860
  )//面向1-3年前端人員
 }//幫助突破技術瓶頸,提升思維能力
// ...

有效連結

Link元件和a標籤的不同點之一就在於Link可以知道其指向的路徑是否是一個有效的路由。

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

可以使用 activeStyle 指定有效連結的樣式,也可以使用activeClassName指定有效連結的樣式類。
大多數時候,我們並不需要知道連結是否有效,但在導航中這個特性則十分重要。比如:可以在導航欄中只顯示合法的路由連結。

// 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 的連結才顯示,這樣如果路由無效,則該連結就不會出現在導航欄中了。
URL引數
考慮下面的url:

/repos/reactjs/react-router 
/repos/facebook/react
他們可能對應的是這種形式:
/repos/:userName/:repoName
//:後面是可變的引數

url中的可變引數可以通過 this.props.params[paramsName] 獲取到:

// modules/Repo.js
import React from 'react'
 
export default React.createClass({
 render() {
  return (
   <div>
{/* 注意這裡通過this.props.params.repoName 獲取到url中的repoName引數的值 */}
    <h2>{this.props.params.repoName}</h2>
   </div>
  )//歡迎加入全棧開發交流圈一起學習交流:864305860
 }//面向1-3年前端人員
})//幫助突破技術瓶頸,提升思維能力

// index.js
// ...
// import Repo
import Repo from './modules/Repo' 
render((
 <Router history={hashHistory}>
  <Route path="/" component={App}>
   <Route path="/repos" component={Repos}/>
   {/* 注意這裡的路徑 帶了 :引數 */}
   <Route path="/repos/:userName/:repoName" component={Repo}/>
   <Route path="/about" component={About}/>
  </Route>
 </Router>//歡迎加入全棧開發交流圈一起學習交流:864305860
), document.getElementById('app'))

接下來訪問 /repos/reactjs/react-router 和 /repos/facebook/react 就會看到不同的內容了。
預設路由

// 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}/>
 //歡迎加入全棧開發交流圈一起學習交流:864305860
   <Route path="/repos" component={Repos}>
    <Route path="/repos/:userName/:repoName" component={Repo}/>
   </Route>
   <Route path="/about" component={About}/>
  </Route>
 </Router>
), document.getElementById('app'))

這裡添加了IndexRoute來指定預設的路徑 / 所對應的元件。注意它沒有path屬性值。
同理也有 預設連結元件 IndexLink。、
使用Browser History
前面的例子一直使用的是hashHistory,因為它一直可以執行,但更好的方式是使用Browser History,它可以不依賴hash埠 (#)。
首先需要改 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的本地服務配置,開啟 package.json 新增 –history-api-fallback :

"start": "webpack-dev-server --inline --content-base . --history-api-fallback"

最後需要在 index.html中 將檔案的路徑改為相對路徑:

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

結語

感謝您的觀看,如有不足之處,歡迎批評指正。

本次給大家推薦一個免費的學習群,裡面概括移動應用網站開發,css,html,webpack,vue node angular以及面試資源等。
對web開發技術感興趣的同學,歡迎加入Q群:864305860,不管你是小白還是大牛我都歡迎,還有大牛整理的一套高效率學習路線和教程與您免費分享,同時每天更新視訊資料。
最後,祝大家早日學有所成,拿到滿意offer,快速升職加薪,走上人生巔峰。