React路由
1女淑、React路由介紹
1.1扶叉、單頁面應(yīng)用
單頁面得特點(diǎn)：只需要加載一次主頁面臼节，通過局部刷新，就可以實(shí)現(xiàn)跳轉(zhuǎn)或者切換頁面
優(yōu)點(diǎn)：加載速度快切厘，用戶體驗(yàn)比較好
缺點(diǎn)：
- 第一次加載比傳統(tǒng)要慢一點(diǎn)
- 不利seo
- 頁面相對復(fù)雜
- 返回鍵
1.2萨咳、安裝react-router-dom
在項(xiàng)目命令行中，執(zhí)行
cnpm install react-router-dom -S
下載到生產(chǎn)環(huán)境的依賴中疫稿。
在組件中通過對象的解構(gòu)方式去獲取到react-router-dom內(nèi)置組件培他，在組件中鹃两，按需引入內(nèi)置組件，在頁面中進(jìn)行使用：
- HashRouter表示一個(gè)路由的根容器舀凛，將來所有的路由相關(guān)的東西怔毛，都要包裹在HashRouter里面，而且一個(gè)網(wǎng)站中腾降，只需要使用一次HashRouter就好了拣度；
- Route表示一個(gè)路由規(guī)則，在Route上螃壤，有兩個(gè)比較重要的屬性抗果，path，component
- Link表示一個(gè)路由的鏈接奸晴，屬性to
import {HashRouter,Route,Link} from 'react-router-dom'
代碼示例：
render(){
return (
<HashRouter>
<div>
<h1>這是網(wǎng)站的根目錄</h1>
<hr />
<Link to="/home">首頁</Link>
<Link to="/movie/">電影</Link>
<Link to="/about">關(guān)于</Link>
<hr />
<Route path="/home" component={Home} ></Route><hr/>
<Route path="/movie" component={Movie} exact></Route><hr/>
<Route path="/about" component={About}></Route><hr/>
</div>
</HashRouter>
);
}
當(dāng)使用HashRouter把APP根組件的元素包裹起來之后冤馏，網(wǎng)站就已經(jīng)啟用路由了，在一個(gè)HashRouter中寄啼，只能有唯一的一個(gè)根元素逮光。 在一個(gè)網(wǎng)站中，只需要使用唯一的一次<HashRouter></HashRouter>就行了墩划。
Route創(chuàng)建的標(biāo)簽涕刚，就是路由規(guī)則，其中path表示要匹配的路由乙帮，component表示要展示的組件杜漠。Route具有兩種身份：1.它是一個(gè)路由匹配規(guī)則；2.它是一個(gè)占位符察净，表示將來匹配到的組件都放到這個(gè)位置
需要注意的地方
- Route 組件path地址是以/開頭 驾茴，配置component屬性，是顯示的組件氢卡，這個(gè)屬性不可以大寫
- Route組件可以單雙標(biāo)簽使用锈至，單標(biāo)簽需要/結(jié)尾，雙標(biāo)簽不可以在中間寫入別的東西
- Link to屬性的地址也是/開頭译秦，Link在頁面渲染的是a標(biāo)簽
2峡捡、路由傳值
2.1、React-router-dom路由傳值
通過配置路由的地址诀浪，在Link跳轉(zhuǎn)時(shí)
Route path路徑后面 /:id （key）
-
Link to 路徑后面 /top/10 （value）
接收傳值：
class類組件棋返，this.props.match.params.屬性名
函數(shù)組件：形參.match.params.屬性名
代碼示例：
render(){
return (
<HashRouter>
<div>
<h1>這是網(wǎng)站的根目錄</h1>
<hr />
<Link to="/movie/top/10">電影</Link>
<hr />
<Route path="/movie/:type/:id" component={Movie} exact></Route>
</div>
</HashRouter>
);
}
在Route內(nèi)置組件中，配置path地址：
<Route path="/movie/:type/:id" component={Movie} exact></Route>
在Link內(nèi)置組件中雷猪，配置to屬性睛竣，進(jìn)行跳轉(zhuǎn)：
<Link to="/movie/top/10">電影</Link>
類組件中通過生命周期進(jìn)行接收，this.props攜帶路由傳遞過來的數(shù)據(jù)：
render(){
console.log(this);
return (
<div>
電影--{this.props.match.params.type}--{this.props.match.params.id}
</div>
);
}
代碼優(yōu)化后：
class Movie extends React.Component{
constructor(props){
super();
this.state = {
routeParams:props.match.params
}
}
render(){
console.log(this);
return (
<div>
電影--{this.state.routeParams.type}--{this.state.routeParams.id}
</div>
);
}
}
函數(shù)組件中通過形參接收傳遞過來的值求摇，props形參射沟，函數(shù)組件作為路由組件殊者，props就是傳遞過來的對象，里面攜帶著路由傳遞過來的數(shù)據(jù)
import React from 'react'
export default function home(props) {
return (
<div>
{props.match.params.id}
</div>
)
}
2.2验夯、嵌套路由
嵌套路由：在路由組件中猖吴，使用Link， Route挥转，配置子路由海蔽，實(shí)現(xiàn)跳轉(zhuǎn)，切換绑谣；
下面為一級路由党窜，在一級路由Home為路由組件
<Route path="/home" component={ Home }></Route>
在Home組件中繼續(xù)使用Link，Route進(jìn)行路由的嵌套借宵，需要注意的就是路由地址幌衣，前部分為一級路由地址，后面接一個(gè)二級路由相應(yīng)的路徑
render() {
return (
<div>
<ul>
<li><Link to="/home/a">推薦</Link></li>
<li><Link to="/home/b">新時(shí)代</Link></li>
<li><Link to="/home/c">動(dòng)漫</Link></li>
</ul>
<Route path="/home/a" component={ A }></Route>
<Route path="/home/b" component={ B }></Route>
<Route path="/home/c" component={ C }></Route>
</div>
)
}
2.3壤玫、JS實(shí)現(xiàn)路由跳轉(zhuǎn)
引入BrowserRouter模塊
import {BrowserRouter,HashRouter,Route,Link} from 'react-router-dom'
使用BrowserRouter作為根容器
//跳轉(zhuǎn)點(diǎn)擊事件
jump(){
window.location.href = "/news"
}
render(){
return (
<BrowserRouter>
<div>
<h1>這是網(wǎng)站的根目錄</h1>
<hr />
<button onClick={()=>{this.jump()}}>新聞</button>
<hr />
<Route path="/news" component={News}></Route>
</div>
</BrowserRouter>
);
}
在render方法中豁护，寫一個(gè)按鈕，按鈕名稱為js跳轉(zhuǎn)路由欲间，定義一個(gè)onClick方法楚里，箭頭函數(shù)解決this指向問題，與render同級括改，定義一個(gè)jump方法腻豌，在jump方法中執(zhí)行一句代碼進(jìn)行路由跳轉(zhuǎn)，使用window.location.href = “路由的地址”實(shí)現(xiàn)路由跳轉(zhuǎn)嘱能。
3、react-router-dom內(nèi)置組件
首先按需引入虱疏，使用什么內(nèi)置組件惹骂，就需要引入
import { BrowserRouter, Link, Route,Redirect,NavLink,Switch } from 'react-router-dom'
3.1、在組件中使用NavLink
NavLink 帶有選中activeClassName ,如果路由處于激活狀態(tài)做瞪，顯示激活class樣式对粪。
在我們之前案例的基礎(chǔ)上，找到Link組件装蓬，我們已經(jīng)學(xué)到Link組件的作用著拭，可以進(jìn)行路由的跳轉(zhuǎn)，通過to屬性牍帚，跳轉(zhuǎn)相應(yīng)的path地址儡遮。
<ul>
<li>
<Link to="/home">首頁</Link>
</li>
<li>
<Link to="/video">好看視頻</Link>
</li>
</ul>
將組件中的Link全部換成NavLink組件
<li>
<NavLink activeClassName="red" to="/home">首頁</NavLink>
</li>
<li>
<NavLink activeClassName="red" to="/video">好看視頻</NavLink>
</li>
我們會發(fā)現(xiàn)，之前可以正常進(jìn)行路由跳轉(zhuǎn)暗赶，換成NavLink鄙币，還依然可以正常跳轉(zhuǎn)肃叶，證明組件得跳轉(zhuǎn)使用NavLink也可以實(shí)現(xiàn)，那么問題來了十嘿，NavLink有什么用因惭，為什么封裝了NavLink，將每一個(gè)NavLink加入一個(gè)activeClassName屬性綁定一個(gè)class類樣式绩衷，這時(shí)在觸發(fā)NavLink時(shí)蹦魔，會觸發(fā)相應(yīng)得樣式，這樣有一個(gè)切換效果咳燕。
3.2版姑、在組件中使用Redirect內(nèi)置組件
Redirect 重定向 具備to屬性，可以直接跳轉(zhuǎn)到指定路由迟郎。
在render方法中剥险，使用內(nèi)置組件，Redirect內(nèi)置組件使用to屬性宪肖，當(dāng)執(zhí)行到內(nèi)置標(biāo)簽時(shí)表制，會進(jìn)行to跳轉(zhuǎn)路由，to后面接的地址是什么控乾，就可以匹配到相應(yīng)得路由組件么介。
<Redirect to="/home/c"></Redirect>
3.3、在組件使用Switch內(nèi)置組件
Switch 具有排他性
在組件中使用Switch標(biāo)簽包裹所有得Route蜕衡，這時(shí)壤短，Route相當(dāng)于每一個(gè)path都是精準(zhǔn)的匹配，展示相應(yīng)的組件慨仿，最后一個(gè)Route是一個(gè)不具備地址的路由路徑久脯，如果當(dāng)Link指向一個(gè)不存在的地址時(shí)，沒有精準(zhǔn)的匹配到地址镰吆，那么會顯示到C404路由帘撰，使用Switch只會顯示一個(gè)組件，匹配到為止万皿。
<Switch>
<Route path="/home" component={ Home }></Route>
<Route path="/video" component={ Home1 }></Route>
<Route path="/book" component={ Home2 }></Route>
<Route path="/renwu" component={ Home3 }></Route>
<Route path="/user" component={ Home4 }></Route>
<Route component={ C404 }></Route>
</Switch>
