React項目通常都有很多的URL需要管理，最常使用的解決方案就是React Router了，最近學習了一下，主要是看了一下官方的英文文檔，加以總結，以備后查。
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保持同步,通過簡單的API即可實現強大的特性如：代碼懶加載，動態(tài)路由匹配，路徑過渡處理等。
下面是一些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.jsimport 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> ) }})這里使用了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>), 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> ) }// ...四 有效鏈接
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.jsimport React from 'react'import { Link } from 'react-router'export default React.createClass({ render() { return <Link {...this.props} activeClassName="active"/> }})// modules/App.jsimport 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.jsimport React from 'react'export default React.createClass({ render() { return ( <div>{/* 注意這里通過this.props.params.repoName 獲取到url中的repoName參數的值 */} <h2>{this.props.params.repoName}</h2> </div> ) }})// index.js// ...// import Repoimport 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>), document.getElementById('app'))接下來訪問 /repos/reactjs/react-router 和 /repos/facebook/react 就會看到不同的內容了。
六 默認路由
// index.jsimport { Router, Route, hashHistory, IndexRoute } from 'react-router'// and the Home componentimport 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來指定默認的路徑 / 所對應的組件。注意它沒有path屬性值。
同理也有 默認鏈接組件 IndexLink。、
七 使用Browser History
前面的例子一直使用的是hashHistory，因為它一直可以運行，但更好的方式是使用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的本地服務配置，打開 package.json 添加 主站蜘蛛池模板： 辛集市| 句容市| 微山县| 开原市| 清水河县| 葵青区| 南涧| 托里县| 大方县| 讷河市| 广丰县| 六盘水市| 丽水市| 福贡县| 涟源市| 松原市| 永安市| 南涧| 中超| 全南县| 徐汇区| 平远县| 读书| 雷山县| 柘城县| 原平市| 天峨县| 阿城市| 宁强县| 汝州市| 渝北区| 寿宁县| 高邑县| 常熟市| 甘肃省| 武功县| 镇宁| 老河口市| 含山县| 阳曲县| 旅游|