轉(zhuǎn)載請(qǐng)注明出處：王亟亟的大牛之路
本來(lái)想一下子把路由的接下來(lái)的內(nèi)容都寫(xiě)完的璃弄，但是今天白天開(kāi)了會(huì)墩虹，傳了些代碼打了個(gè)包，就被耽擱了 這一篇來(lái)講一下 IndexLink和 onlyActiveOnIndex的一些問(wèn)題
老習(xí)慣先安利一下：https://github.com/ddwhan0123/Useful-Open-Source-Android
例子的源碼都傳git了，源碼地址：https://github.com/ddwhan0123/ReactDemo
知識(shí)來(lái)源：https://github.com/reactjs/react-router-tutorial
前兩天寫(xiě)了一些例子搁进，包括普通跳轉(zhuǎn)沥阱，嵌套缎罢，帶參跳轉(zhuǎn)等等，這一篇主要來(lái)實(shí)現(xiàn)一個(gè)常用功能 “回到首頁(yè)“考杉。
之前的例子里我們通過(guò)訪問(wèn)/來(lái)進(jìn)入首頁(yè)
<Route path="/" component={First}></Route>
但是其實(shí)我們Main.js這個(gè)頁(yè)面他沒(méi)有頁(yè)面內(nèi)容策精，我們一開(kāi)始就進(jìn)入了First.js
那么如何讓我們的Main.js有內(nèi)容呢？
可以使用IndexRoute
先來(lái)新建一個(gè)模擬的頁(yè)面
Six.js
import React from 'react';
export default React.createClass({
render(){
return (
<div>
<h3>this is Six</h3>
</div>
)
}
})
也就是刷出一句話
要讓Main.js能顯示內(nèi)容需要2步
1在 Main.js里加入以下內(nèi)容
<IndexRoute component={Six}/>
實(shí)質(zhì)上他讓本來(lái)空空的根路徑多了一個(gè)Six組件
<First>
<Six/>
</First>
這還不夠還需要在 First.js里做一些修改崇棠，如下
{this.props.children || <Six/>}
這使得<Six/>成為了根路由的子組件,它成為父節(jié)點(diǎn)的this.props.children
內(nèi)容理解有差異或者錯(cuò)誤大街可以給我提蛮寂，原文地址：https://github.com/reactjs/react-router-tutorial/tree/master/lessons/08-index-routes
接下來(lái)我們來(lái)提一下如何做一個(gè)返回頁(yè)，最簡(jiǎn)單的方式是易茬，寫(xiě)一個(gè)路由鏈過(guò)去酬蹋，這很方便很簡(jiǎn)單，像這樣
<NavLink to="/">To First</NavLink>
官方不推薦我們這么干抽莱，因?yàn)樘D(zhuǎn)根路由會(huì)丟失一些內(nèi)容范抓，諸如activeClassName，activeStyle什么的食铐。
官方推薦的是精確匹配方式 IndexLink
要是用還是要導(dǎo)包
import { IndexLink } from 'react-router'
然后使用
<IndexLink to="/" activeClassName="active">To First</IndexLink>
就行了
你還記得我們自己封裝的<NavLink/>組件嗎匕垫？
它使用<Link/>實(shí)現(xiàn)的，那么就不能使用 IndexLink方式了嗎虐呻？
答案是可以象泵，加一個(gè)屬性就行那就是 onlyActiveOnIndex
讓我們?cè)?Two.js這個(gè)頁(yè)面加上返回按鈕試試
import React from 'react';
import styled from 'styled-components';
import NavLink from './../component/nav/NavLink';
const H3= styled.h3`
background-color: #a11
`;
export default React.createClass({
render(){
return (
<div>
<NavLink to="/" onlyActiveOnIndex>To First</NavLink><br></br>
<H3>i am two h3</H3>
</div>
);
}
})
單純的加一個(gè)屬性就好很簡(jiǎn)單，看看效果
進(jìn)入首頁(yè) 點(diǎn)擊 Two
到了第二頁(yè)點(diǎn)返回鍵就可以回到第一頁(yè)了
效果很簡(jiǎn)單斟叼，但是整明白以后做類似功能就不會(huì)迷糊了偶惠，接下來(lái)還會(huì)繼續(xù)寫(xiě)React-Router相關(guān)內(nèi)容吧，我本身不是做前端的朗涩，學(xué)習(xí)起來(lái)不是太快忽孽，各位觀眾老爺見(jiàn)諒哦！
