React Router基礎(chǔ)使用

更新時(shí)間：2017年01月17日 16:13:17 作者：imwtr

本文主要介紹了React Router的基礎(chǔ)知識(shí)，具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧

React是個(gè)技術(shù)棧，單單使用React很難構(gòu)建復(fù)雜的Web應(yīng)用程序，很多情況下我們需要引入其他相關(guān)的技術(shù)

React Router是React的路由庫(kù)，保持相關(guān)頁(yè)面部件與URL間的同步

下面就來(lái)簡(jiǎn)單介紹其基礎(chǔ)使用，更全面的可參考指南

1. 它看起來(lái)像是這樣

在頁(yè)面文件中

在外部腳本文件中

2. 庫(kù)的引入

React Router庫(kù)的引入，有兩種方式

2.1 瀏覽器直接引入

可以引用這里的瀏覽器版本，或者下載之后引入

然后就可以直接使用 ReactRouter 這個(gè)對(duì)象了，我們可能會(huì)使用到其中的幾個(gè)屬性

let {Router, Route, IndexRoute, Redirect, IndexRedirect, Link, IndexLink, hashHistory, browserHistory} = ReactRouter;

2.2 npm 安裝，通過構(gòu)建工具編譯引入

npm install --save react-router

安裝好路由庫(kù)之后，在腳本文件中引入相關(guān)屬性

import {Router, Route, IndexRoute, Redirect, IndexRedirect, Link, IndexLink, hashHistory, browserHistory} from 'react-router';

因?yàn)g覽器目前還不能支持import與export命令，且babel工具不會(huì)將require命令編譯，所以我們還得需要如Webpack等構(gòu)建工具編譯引入

庫(kù)引入之后，在ReactDOM的render方法中，就可以使用相關(guān)的組件了

3. 路由簡(jiǎn)單使用

最基本的，通過URL判斷進(jìn)入哪個(gè)頁(yè)面（組件部件）

class First extends Component {
 constructor(props) {
 super(props);
 }
 render() {
 return <p>First</p>
 }
}
class Second extends Component {
 constructor(props) {
 super(props);
 }
 render() {
 return <p>Second</p>
 }
}
class App extends Component {
 constructor(props) {
 super(props);
 }
 render() {
 return <div></div>
 }
}

render((
 <Router history={hashHistory}>
 <Route path="/" component={App} />
 <Route path="first" component={First} />
 <Route path="second" component={Second} />
 </Router>
 ),
 document.getElementById('box')
);

首先，Router是一個(gè)容器，history屬性定義了是用何種方式處理頁(yè)面的URL

有三種：

browserHistory：通過URL的變化改變路由，是推薦的一種方式，但是需要在服務(wù)器端需要做一些配置（窩目前還不知怎么配）
hashHistory：通過#/ ，其實(shí)就像是單頁(yè)面應(yīng)用中常見的hashbang方式，example.com/#/path/path.. （使用簡(jiǎn)單，這里暫且就用這種方式）
createMemoryHistory：Memory history 并不會(huì)從地址欄中操作或是讀取，它能夠幫助我們完成服務(wù)器端的渲染，我們得手動(dòng)創(chuàng)建history對(duì)象

然后，在容器中使用Route組件定義各個(gè)路由，通過path指定路徑（可以看到，是不區(qū)分大小寫的），通過component指定該路徑使用的組件

也可以直接在Router容器上直接用routes屬性定義各個(gè)路由，如

let routes =
 <div>
 <Route path="/" component={App} />
 <Route path="first" component={First} />
 <Route path="second" component={Second} />
 </div>;
render(<Router routes={routes} history={hashHistory}></Router>, document.getElementById('box'));

需要注意的是{routes}中只能有一個(gè)父級(jí)，所以這里加了<div>標(biāo)簽

另外，路由Route也可以嵌套，在上面的例子中，嵌套起來(lái)可能更符合實(shí)際情況

需要注意的是，這里的App在父級(jí)，為了獲取子級(jí)的First與Second組件，需要在App組件中添加 this.props.children 獲取

class App extends Component {
 constructor(props) {
 super(props);
 }
 render() {
 return <div>{this.props.children}</div>
 }
}
render((
 <Router history={hashHistory}>
 <Route path="/" component={App}>
 <Route path="first" component={First} />
 <Route path="second" component={Second} />
 </Route>
 </Router>
 ),
 document.getElementById('box')
);

同樣的，可以直接在Router中用routes屬性定義路由

let routes =
 <Route path="/" component={App}>
 <Route path="first" component={First} />
 <Route path="second" component={Second} />
 </Route>;
render(<Router routes={routes} history={hashHistory}></Router>, document.getElementById('box'));

4. 路由的其他組件

除了基本的Route之外，IndexRoute、Redirect、IndexRedirect、Link、IndexLink等，顧名思義

IndexRoute: 在主頁(yè)面會(huì)用到，如上個(gè)例子中，在路徑"/"下我們看到的是空白頁(yè)面，可以添加默認(rèn)的頁(yè)面組件用于導(dǎo)航
Link: 可以認(rèn)為它是<a>標(biāo)簽在React中的實(shí)現(xiàn)，使用to屬性定義路徑，還可以通過activeClass或activeStyle定義active的樣式
IndexLink: 類似Link，推薦用來(lái)定義指向主頁(yè)面的鏈接，當(dāng)然也可以隨意定義

class First extends Component {
 constructor(props) {
 super(props);
 }
 render() {
 return (
 <p>First
 <IndexLink to="/" activeStyle={{color: 'red'}}>Basic</IndexLink>
 </p>
 )
 }
}
class Second extends Component {
 constructor(props) {
 super(props);
 }
 render() {
 return <p>Second</p>
 }
}
class Basic extends Component {
 constructor(props) {
 super(props);
 }
 render() {
 return (
 <ul role="nav">
 <li><IndexLink to="/" activeStyle={{color: 'red'}}>Basic</IndexLink></li>
 <li><Link to="/first" activeStyle={{color: 'red'}}>First</Link></li>
 <li><Link to="/Second" activeClass="active">Second</Link></li>
 </ul>
 )
 }
}
class App extends Component {
 constructor(props) {
 super(props);
 }

 render() {
 return <div>
 {this.props.children}
 </div>
 }
}
render((
 <Router history={hashHistory}>
 <Route path="/" component={App}>
 <IndexRoute component={Basic} />
 <Route path="first" component={First} />
 <Route path="second" component={Second} />
 </Route>
 </Router>
 ),
 document.getElementById('box')
);

Redirect: 從from路徑重定向到to路徑
IndexRedirect: 在主頁(yè)面，直接重定向到to路徑

render((
 <Router history={hashHistory}>
 <Route path="/" component={App}>
 <IndexRoute component={Basic} />
 <IndexRedirect to="first" />
 <Redirect from="second" to="first" />
 <Route path="first" component={First} />
 <Route path="second" component={Second} />
 </Route>
 </Router>
 ),
 document.getElementById('box')
);

5. 路由的path規(guī)則

path定義的路由的路徑，在hashHistory中，它的主頁(yè)路徑是 #/

自定義Route路由通過與父Route的path進(jìn)行合并，在與主頁(yè)路徑合并，得到最終的路徑

path的語(yǔ)法：

:paramName 匹配 URL 的一個(gè)部分，直到遇到下一個(gè)/、?、#
() 表示URL的這個(gè)部分是可選的
* 匹配任意字符(非貪婪模式)，直到模式里面的下一個(gè)字符為止
** 匹配任意字符(貪婪模式)，直到下一個(gè)/、?、#為止

<Route path="/hello/:name"> // 匹配 /hello/michael 和 /hello/ryan
<Route path="/hello(/:name)"> // 匹配 /hello, /hello/michael, 和 /hello/ryan
<Route path="/files/*.*"> // 匹配 /files/hello.jpg 和 /files/hello.html
<Route path="/**/*.jpg"> // 匹配 /files/hello.jpg 和 /files/path/to/file.jpg

而:name可以通過 this.props.params 中取到

class First extends Component {
 constructor(props) {
 super(props);
 }
 render() {
 return (
 <p>First {this.props.params.name}
 <IndexLink to="/" activeStyle={{color: 'red'}}>Basic</IndexLink>
 </p>
 )
 }
}
.
.
<Route path="/:name" component={First} />

通過React Dev Tool也可以看到組件的相關(guān)數(shù)據(jù)

6. 路由的onEnter、onLeave鉤子

在路由的跳轉(zhuǎn)中，我們可能需要在進(jìn)入頁(yè)面或離開頁(yè)面的時(shí)候做一些特殊操作，Route 通過 onEnter 與 onLeave 定義了這兩個(gè)行為

<Route path="first" component={First} onEnter={(nextState, replace) => {
 console.log(nextState);
 alert('onEnter');
 // replace('second');
 }} onLeave={() => {
 alert('onLeave');
 }}/>

如上，帶兩個(gè)參數(shù)，通過 replace 可以更新路徑，把注釋去掉后，進(jìn)入"/first"時(shí)立馬跳轉(zhuǎn)值"/second"，這在檢測(cè)登錄時(shí)應(yīng)該比較有用