根據(jù)上一篇文章别厘，我們基于webpack已經(jīng)配置好react開(kāi)發(fā)環(huán)境，接下來(lái)了解一下React Router 路由泌参。
React Router路由在開(kāi)發(fā)中時(shí)刻都會(huì)用到，它是SPA（單頁(yè)應(yīng)用）的基礎(chǔ)颈畸，可以說(shuō)不會(huì)路由系統(tǒng)基本就無(wú)法用React進(jìn)行編程。其實(shí)路由可以簡(jiǎn)單的看作我們平時(shí)訪問(wèn)的網(wǎng)址或者路徑，這樣看有助于你的理解，但是并不正確应役。
Router包安裝:
安裝包還是要打開(kāi)命令行工具，使用npm來(lái)進(jìn)行安裝燥筷。
npm install --save react-router react-router-dom
react-router：是基本的router包扛吞，里邊函的內(nèi)容較多，但是在網(wǎng)頁(yè)開(kāi)發(fā)中有很多用不到荆责，現(xiàn)在的市面上的課程講的基本都是這個(gè)包的教程。
react-router-dom：隨著react生態(tài)環(huán)境的壯大亚脆，后出現(xiàn)的包做院，這個(gè)包比react-router包輕巧了很多。
注意：其實(shí)安裝了react-router包就不用安裝了react-router-dom包了濒持，這里我們只是為了給大家一個(gè)提示键耕，所以安裝了兩個(gè)包。在實(shí)際開(kāi)發(fā)中柑营，請(qǐng)根據(jù)需要進(jìn)行安裝屈雄。安裝時(shí)使用--save，因?yàn)檫@是要在生產(chǎn)環(huán)境中使用的官套。
我們?cè)?code>/app文件夾下新建一個(gè)jsdemo.js頁(yè)面酒奶。然后引進(jìn)React包，并編寫(xiě)一個(gè)A頁(yè)面的組件奶赔。請(qǐng)看下面的代碼惋嚎。
import React from 'react';
export default class jsdemo extends React.Component{
render(){
return(
<div>A默認(rèn)頁(yè)面</div>
);
}
}
這里我們采用了ES6的類(lèi)語(yǔ)法，這也是現(xiàn)在React推薦使用的站刑，如果使用老語(yǔ)法會(huì)有一條黃色的警告或報(bào)錯(cuò)另伍。
寫(xiě)好組件后，引入index.js頁(yè)面绞旅，在頭部加入引入語(yǔ)句摆尝，并改寫(xiě)渲染代碼。
import React from 'react';
import ReactDOM from 'react-dom';
import Jsdemo from './jsdemo';
ReactDOM.render(
<Jsdemo/>,
document.getElementById("app")
);
引入完成后因悲，執(zhí)行npm run dev預(yù)覽可以看到我們寫(xiě)的A頁(yè)面的組件堕汞。通過(guò)上邊基本的練習(xí)，我們有了一定經(jīng)驗(yàn)晃琳，那么接下來(lái)我們仿照上面的方法制作兩個(gè)新組件,jsdemob和jsdemoc臼朗。代碼如下：
//jsdemob.js
import React from 'react';
export default class jsdemob extends React.Component{
render(){
return(
<div>B頁(yè)面</div>
);
}
}
//jsdemoc.js
import React from 'react';
export default class jsdemoc extends React.Component{
render(){
return(
<div>B頁(yè)面</div>
);
}
}
寫(xiě)完三個(gè)頁(yè)面組件以后邻寿，我們把這三個(gè)頁(yè)面都引入到index.js文件里邊。
import Jsdemo from './jsdemo';
import Jsdemob from './jsdemob';
import Jsdemoc from './jsdemoc';
引入和書(shū)寫(xiě)路由
三個(gè)頁(yè)面都已經(jīng)作好视哑，現(xiàn)在就需要路由來(lái)切換他們了绣否，先用import引入我們的路由包，這里我們用兩個(gè)模塊挡毅，一個(gè)是Router（我自己叫它路由器）蒜撮，另一個(gè)是Route（我自己叫它路由）。
importi {BrowserRouter as Router , Route} from 'react-router-dom';
然后我們改寫(xiě)文件跪呈，增加路由設(shè)置段磨。
ReactDOM.render(
<Router>
<div>
<Route exact path="/" component={Jsdemo} />
<Route path="/Jsdemob" component={Jsdemob} />
<Route path="/Jsdemoc" component={Jsdemoc} />
</div>
</Router>,
document.getElementById("app")
);
注意：這里的exact是精確匹配的意思，比如我們有多層路由進(jìn)行嵌套時(shí)耗绿，exact可以幫助我們精確匹配到你想跳轉(zhuǎn)的路由苹支。exact的值為bool型，為true是表示嚴(yán)格匹配误阻，為false時(shí)為正常匹配债蜜。
我們路由已經(jīng)設(shè)置完畢了，但是我們現(xiàn)在還不能進(jìn)行切換究反，那我們就做個(gè)切換的組件寻定，命名為:Nav
制作Nav組件
在/app文件夾下新建一個(gè)nav.js的文件，先引入react和react-router-dom兩個(gè)包精耐。
import React from 'React';
import {NavLink} from 'react-router-dom';
編寫(xiě)基本的nav組件:
//nav.js
const NavBar = () =>(
<div>
<div>
<NavLink exact to='/'>Jsdemoa</NavLink> |
<NavLink to='/Jsdemob'>Jsdemob</NavLink> |
<NavLink to='/Jsdemoc'>Jsdemoc</NavLink>
</div>
</div>
)
export default NavBar;
組件編寫(xiě)完成后狼速，引入index.js，并添加 <Nav/>標(biāo)簽到代碼中：
import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter as Router , Route} from 'react-router-dom';
import Jspang from './jspang';
import Jspangb from './jspangb';
import Jspangc from './jspangc';
import Nav from './nav';
ReactDOM.render(
<Router>
<div>
<Nav/>
<Route exact path="/" component={Jsdemo} />
<Route path="/Jsdemob" component={Jsdemob} />
<Route path="/Jsdemoc" component={Jsdemoc} />
</div>
</Router>,
document.getElementById("app")
現(xiàn)在可以進(jìn)行預(yù)覽了卦停，也可以順利的切換頁(yè)面內(nèi)容了向胡，說(shuō)明路由已經(jīng)起作用了。當(dāng)然這只是路由最簡(jiǎn)單的用法
NavLink中常用選項(xiàng)
我們初識(shí)了React的路由后惊完，并制作了一個(gè)小案例捷枯。接下來(lái)了解一下NavLink標(biāo)簽上的選項(xiàng)。
NavLink使用樣式
如果我們想給路由一個(gè)樣式专执，這時(shí)候我們寫(xiě)了一CSS文件淮捆，我們?nèi)绾尾拍苁褂迷?code>NavLink上？其實(shí)這并不難本股，不過(guò)要配置一下webpack.config.js文件攀痊。
先寫(xiě)一個(gè)CSS文件(我是直接在/src文件夾下直接創(chuàng)建的)，并放在和nav.js一個(gè)文件夾下,命名為nav.css拄显。
//nav.css
.blue{
color:blue;
}
然后用es6的import方法引入到nav.js組件里苟径，并在NavLink上加 className指定CSS類(lèi)。
//nav.js
import './nav.css';
<NavLink exact to='/' className="blue"> Jsdemoa</NavLink> |
現(xiàn)在瀏覽就會(huì)出現(xiàn)效果躬审，因?yàn)樵谏弦黄恼录郑覀円呀?jīng)配置了css文件和scss文件的解析蟆盐。如果webpack還不能對(duì)CSS文件進(jìn)行正確的解析，那你就在看一下我上一篇文章需npm安裝style-loader和css-loader的知識(shí)點(diǎn)遭殉。
直接在NavLink上寫(xiě)樣式
除了這種用CSS文件的方式寫(xiě)樣式石挂，還可以更直接寫(xiě)行內(nèi)樣式，接下來(lái)在NavLink上寫(xiě)樣式险污，看下面的代碼痹愚。
<NavLink exact to='/' style={{color:'red',fontSize:'50px'}}>Jsdemoa</NavLink>
這種方法雖然直觀好用，但是不建議在實(shí)際開(kāi)發(fā)中使用蛔糯，這增加了代碼的耦合度拯腮，不是一種好的編程方式。
activeClassName
作為一個(gè)鏈接是用激活狀態(tài)的蚁飒，激活狀態(tài)就是當(dāng)我們處在這個(gè)鏈接時(shí)动壤。activeClassName就是設(shè)置激活狀態(tài)的樣式，它接受一個(gè)類(lèi)名淮逻，我們現(xiàn)在nav.css頂一個(gè)active的類(lèi)琼懊，把字體設(shè)置為紅色。
//nav.css
.blue{
color:blue;
}
.active{
color:red;
}
然后改寫(xiě)NavLink標(biāo)簽弦蹂。
//nav.js
import React from 'React';
import {NavLink} from 'react-router-dom';
import './nav.css';
const NavBar = () =>(
<div>
<div>
<NavLink exact to='/' className="blue">Jsdemoa</NavLink> |
<NavLink to='/Jsdemob' activeClassName='active'>Jsdemob</NavLink> |
<NavLink to='/Jsdemoc' activeClassName='active'>Jsdemoc</NavLink>
</div>
</div>
)
export default NavBar;
現(xiàn)在運(yùn)行就會(huì)看到點(diǎn)擊Jsdemob的時(shí)候，Jsdemob本身是紅色强窖，Jsdemoa是藍(lán)色凸椿，Jsdemoc沒(méi)有點(diǎn)擊是默認(rèn)顏色
404設(shè)置和跳轉(zhuǎn)設(shè)置
項(xiàng)目中都要設(shè)置404頁(yè)面，也就是當(dāng)找不到這個(gè)路由時(shí)我們要跳轉(zhuǎn)的頁(yè)面翅溺。React中的404主要靠Switch組件來(lái)完成脑漫。接下來(lái)我們學(xué)習(xí)一下Switch相關(guān)的知識(shí)和有關(guān)跳轉(zhuǎn)的知識(shí)。
Switch組件的使用
在index.js頁(yè)面中咙崎，在引入路由的地方优幸，我們加入Switch的引入。
import {BrowserRouter as Router , Route , Switch} from 'react-router-dom';
編寫(xiě)404頁(yè)面
現(xiàn)在需要一個(gè)統(tǒng)一的404頁(yè)面褪猛，這里在/app文件夾下新建一個(gè)error.js文件网杆。然后封裝成組件，方便路由進(jìn)行調(diào)用伊滋。
//error.js
import React from 'react';
export default class error extends React.Component{
render(){
return(
<h2>404</h2>
);
}
}
在nav.js頁(yè)面中加入一個(gè)不存在的鏈接NavLink碳却，為的時(shí)讓它在錯(cuò)誤的時(shí)候能自動(dòng)跳轉(zhuǎn)到404頁(yè)面上。
//nav.js
<NavLink to='/react' activeClassName='active'>404</NavLink>
下面該主角Switch上場(chǎng)了笑旺，改寫(xiě)我們的index.js頁(yè)面昼浦，改為下面的樣子。
import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter as Router, HashRouter, MemoryRouter, Route , Switch ,Redirect} from 'react-router-dom';
import Jsdemo from './jsdemo';
import Jsdemob from './jsdemob';
import Jsdemoc from './jsdemoc';
import Nav from './nav';
import Error from './error';
ReactDOM.render(
//basename的作用是增加一級(jí)導(dǎo)航目錄
<Router basename="demo">
<div>
<Nav/>
<Switch>
<Route exact path="/" component={Jsdemo} />
<Route path="/Jsdemob" component={Jsdemob} />
/*canshu和aa是要傳遞的兩個(gè)參數(shù)對(duì)應(yīng)的名詞*/
<Route path="/Jsdemoc/:canshu/:aa" component={Jsdemoc} />
<Redirect from="/redirect" to="/Jsdemob" />
<Route component={Error} /> //這個(gè)一定要在所有連接最后
</Switch>
</div>
</Router>,
document.getElementById("app")
)
然后到瀏覽器中進(jìn)行預(yù)覽筒主，你會(huì)看到當(dāng)點(diǎn)擊404鏈接時(shí)关噪，因?yàn)殒溄拥刂肥俏覀兿箤?xiě)的鸟蟹，但是它跳到了error.js頁(yè)面。注意順序：錯(cuò)誤頁(yè)面應(yīng)該在最后面使兔。
引入Redirect組件
在index.js中引入Redirect組件
//index.js
import {BrowserRouter as Router , Route , Switch ,Redirect} from 'react-router-dom';
加入跳轉(zhuǎn)鏈接
在nav.js里加入一個(gè)準(zhǔn)備跳轉(zhuǎn)的鏈接建钥，代碼如下。
<NavLink to='/redirect' activeClassName='active'>Redirect</NavLink>
這時(shí)候點(diǎn)擊這個(gè)鏈接火诸，會(huì)跳轉(zhuǎn)到404頁(yè)面锦针，但是我們希望跳轉(zhuǎn)到j(luò)spangb頁(yè)面。
****加入<Redirect>標(biāo)簽
在index.js文件中置蜀，加入<Redirect>標(biāo)簽奈搜。
<Redirect from="/redirect" to="/Jspangb" />
*
from：表示來(lái)自于什么鏈接，也就是當(dāng)鏈接是redirect時(shí)盯荤，我們觸發(fā)跳轉(zhuǎn)命令馋吗。
to：表示要跳轉(zhuǎn)到的鏈接，這里是跳轉(zhuǎn)到Jspangb的組件中秋秤。
寫(xiě)完后你可以在瀏覽器中查看這個(gè)跳轉(zhuǎn)效果了宏粤。
總結(jié):設(shè)置404和跳轉(zhuǎn)都要先加入Switch的支持，在制作404時(shí)一定記得要把404的Route設(shè)置到所有路由的后邊灼卢。跳轉(zhuǎn)時(shí)使用Redirect標(biāo)簽绍哎，這個(gè)很容易實(shí)現(xiàn)。
