點擊下載
本文文檔

當前位置：首頁 - 科技 - 知識百科 - 正文

React路由管理ReactRouter使用步驟詳解

來源：懂視網責編：小采時間：2020-11-27 19:48:05

React路由管理ReactRouter使用步驟詳解

React路由管理ReactRouter使用步驟詳解:這次給大家帶來React路由管理React Router使用步驟詳解，React路由管理React Router使用的注意事項有哪些，下面就是實戰案例，一起來看一下。React項目通常都有很多的URL需要管理，最常使用的解決方案就是React Router了，最近學習了一下，主要是看了

推薦度：

點擊下載本文 文檔為doc格式

導讀React路由管理ReactRouter使用步驟詳解:這次給大家帶來React路由管理React Router使用步驟詳解，React路由管理React Router使用的注意事項有哪些，下面就是實戰案例，一起來看一下。React項目通常都有很多的URL需要管理，最常使用的解決方案就是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 (
 <p>
 <h1>React Router Tutorial</h1>
 <ul role="nav">
 <li><Link to="/about">About</Link></li>
 <li><Link to="/repos">Repos</Link></li>
 </ul>
 </p>
 )
 }
})

這里使用了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 (
 <p>
 <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}
 </p>
 )
 }
// ...

四有效鏈接

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 (
 <p>
{/* 注意這里通過this.props.params.repoName 獲取到url中的repoName參數的值 */}
 <h2>{this.props.params.repoName}</h2>
 </p>
 )
 }
})

// 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>
), 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}/>
 <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 添加 –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>

這樣就去掉了url中的 # 。

相信看了本文案例你已經掌握了方法，更多精彩請關注Gxl網其它相關文章！

React路由管理ReactRouter使用步驟詳解

推薦度：

點擊下載本文 文檔為doc格式

標簽：管理詳解解析

熱門焦點

React路由管理ReactRouter使用步驟詳解

React路由管理ReactRouter使用步驟詳解

React路由管理ReactRouter使用步驟詳解

最新推薦

猜你喜歡

熱門推薦