轉(zhuǎn)載請注明出處：王亟亟的大牛之路
這一篇還是繼續(xù)寫react router相關(guān)的內(nèi)容兼蜈，廢話之前先安利：https://github.com/ddwhan0123/Useful-Open-Source-Android （總有你需要的東西）
上一篇講到我們可以利用 Router來實現(xiàn)嵌套跳轉(zhuǎn)等效果，但是那些都是靜態(tài)的，這一篇著重于寫一些動態(tài)跳轉(zhuǎn)內(nèi)容
Link
之前也有提及，舊時代我們常用的跳轉(zhuǎn)形式就是<a/>,React豐富的api也提供給我們類似的實現(xiàn)杖小，那就是Link,我們用一個例子來看一下這玩意怎么用
他也是react-router包里的一部分睬魂，先 import
import { Link } from 'react-router'
然后就可以正常使用了，像這樣
import React from 'react'
import { Link } from 'react-router'
export default React.createClass({
render() {
return (
<div>
<h1>React Router Tutorial</h1>
<ul role="nav">
<Link to="/Three">Three</Link><br></br>
<Link to="/Three">Three</Link>
</ul>
</div>
)
}
})
效果如下
當(dāng)然烛愧，之前注冊的<Route>不能少，不然無法進(jìn)行跳轉(zhuǎn)
main.js的片段
<Route path="/Three" component={Three}/>
<Route path="/Two" component={Two}/>
activeStyle activeClassName
activeStyle 可以幫我們改變鏈接的樣式掂碱，使用簡單配一個屬性即可怜姿，像這樣
<Link to="/Two" activeStyle={{color: 'red'}}>Two</Link>
上面代碼中，當(dāng)前頁面的鏈接會紅色顯示
還有個字段是activeClassName 指定當(dāng)前路由的Class
像這樣
<Link {...this.props} activeClassName="active"/>
那既然 類似的使用場景很多疼燥，為何不封裝一個組件沧卢，方便調(diào)用？
ok,我們新建一層目錄醉者，像這樣
里面放一個專門處理跳轉(zhuǎn)的NavLink.js對<Link>進(jìn)行一些簡單的封裝
import React from 'react';
import { Link } from 'react-router';
export default React.createClass({
render() {
return (<Link {...this.props} activeClassName="active"/>)
}
})
非常簡單讓我們能傳參但狭，統(tǒng)一設(shè)置activeClassName披诗，當(dāng)然你想自定義怎么都可以
URL Params
有些時候我們會碰到一些很像但又不是完全不同的路由，像這樣
/Three/haha
/Three/haha/haha1
/Three/hehe/hehe1
官方提供給我們一個 以: 開頭的配對形式立磁，像這樣
/Three/:haha/:haha1
我們 拿
/Three
/Three/haha
做個演示案例
因為是分層渲染呈队，所以Three/haha就要交給第三方黑暗勢力去展示，而Three還是給Three
所以我們的main.js,現(xiàn)在長這樣
import React from 'react';
import { render } from 'react-dom';
import { Router , Route , hashHistory , Link } from 'react-router';
import First from './First';
import Three from './Three';
import Two from './Two';
import Four from './Four';
render((
<Router history={hashHistory}>
<Route path="/" component={First}>
</Route>
<Route path="/Three" component={Three}/>
<Route path="/Three/:name" component={Four}/>
<Route path="/Two" component={Two}/>
</Router>
), document.getElementById('app'))
Four就是我們新添加渲染的組件唱歧，內(nèi)容不用管宪摧，你得理解Three和Three/:name實質(zhì)上并不是同一個東西但是他屬于同一種匹配規(guī)則，而這規(guī)則匹配后都將被Four去渲染
Four.js
import React from 'react';
export default React.createClass({
render(){
return (
<div>
<h2>{this.props.params.name}</h2>
</div>
)
}
})
這里接受一個傳遞來的name屬性颅崩，把它顯示出來几于，值是跳轉(zhuǎn)傳來的
我們讓 第三個頁面產(chǎn)生多級跳轉(zhuǎn)到，更改如下
import React from 'react';
import styled from 'styled-components';
import NavLink from './../component/nav/NavLink';
const H2 = styled.h2`
color: #eee
`;
export default React.createClass({
render(){
return (
<div>
<h2>hi i am three</h2>
<ul>
<NavLink to="/Three/haha">haha</NavLink><br></br>
<NavLink to="/Three/heihei">heihei</NavLink>
</ul>
</div>
)
}
})
先導(dǎo)包把剛才自己創(chuàng)建的主件給“摳來用“
import NavLink from './../component/nav/NavLink';
然后分別進(jìn)行路由配置挨摸，一個傳haha一個heihei,我們來看下Four有沒有相應(yīng)效果孩革，先看看Three
我們點一下haha
url,值都顯示出了我們已經(jīng)得到了傳來的haha
下一篇將是Router的完結(jié)篇，整體是從官方demo入手加以自己的理解和嘗試得运，有問題或者有疑問可以給我留言膝蜈，謝謝！
