首頁 > 文章 > web前端 > React路由管理與React Router使用詳解

React路由管理與React Router使用詳解

php中世界最好的语言原創: 2018-05-30 13:55:102113瀏覽

這次帶給大家React路由管理與React Router使用詳解，React路由管理與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.

##UIUI組件和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: &#39;red&#39; }}>About</Link></li>
<li><Link to="/repos" activeStyle={{ color: &#39;red&#39; }}>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>

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

React路由管理與React Router使用詳解

相關文章