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>

結語

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