路由基礎(chǔ)介紹
1品洛，什么是前端路由氧秘？
路由是根據(jù)不同的 url 地址展示不同的內(nèi)容或頁(yè)面
前端路由就是把不同路由對(duì)應(yīng)不同的內(nèi)容或頁(yè)面的任務(wù)交給前端來(lái)做，之前是通過(guò)服務(wù)端根據(jù) url 的不同返回不同的頁(yè)面實(shí)現(xiàn)的。
2，前端路由有什么優(yōu)點(diǎn)和缺點(diǎn)？
優(yōu)點(diǎn)
用戶體驗(yàn)好藕届，不需要每次都從服務(wù)器全部獲取，快速展現(xiàn)給用戶
缺點(diǎn)
使用瀏覽器的前進(jìn)亭饵，后退鍵的時(shí)候會(huì)重新發(fā)送請(qǐng)求休偶，沒(méi)有合理地利用緩存
單頁(yè)面無(wú)法記住之前滾動(dòng)的位置，無(wú)法在前進(jìn)辜羊，后退的時(shí)候記住滾動(dòng)的位置
我們使用create-react-app搭建的項(xiàng)目https://blog.csdn.net/github_squad/article/details/57452333
準(zhǔn)備工作：安裝react-router-dom
npm install react-router-dom --save // --save 會(huì)把依賴包名稱添加到 package.json 文件 dependencies 鍵下,運(yùn)行時(shí)依賴
開(kāi)始寫(xiě)react-router啦
以下代碼踏兜，完全復(fù)制于 https://reacttraining.com/react-router/web/example/basic
import React from 'react'
import {
BrowserRouter as Router,
Route,
Link
} from 'react-router-dom'
const BasicExample = () => (
<Router> // 創(chuàng)建一個(gè)路由
<div>
<ul> // Link 組件 相當(dāng)于a標(biāo)簽，to屬性相當(dāng)于a標(biāo)簽中的href八秃，可以打開(kāi)控制臺(tái)看到碱妆，
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/topics">Topics</Link></li>
</ul>
<hr/>
// 監(jiān)聽(tīng)路由，地址欄的變化昔驱，疹尾，很抱歉exact的意思我現(xiàn)在都不知道，觀察到exact 在跟路由下骤肛，和exact={activeOnlyWhenExact}
<Route exact path="/" component={Home}/> // 如果地址欄訪問(wèn)了跟路徑纳本，比如http://localhost:5005/ 就會(huì)去渲染<Home /> 組件
<Route path="/about" component={About}/> // 如果地址欄訪問(wèn)了/about 路徑，比如http://localhost:5005/about 就會(huì)去渲染<About/> 組件
<Route path="/topics" component={Topics}/> // 如果地址欄訪問(wèn)了topics 路徑腋颠，比如http://localhost:5005/topics 就會(huì)去渲染<Topics/> 組件
</div>
</Router>
)
3.動(dòng)態(tài)路由
首先講一下模糊匹配
const ParamsExample = () => (
<Router> // 在<Router>組件中繁成，可以任意的寫(xiě)標(biāo)簽寫(xiě)布局，很?chē)虖埵缑怠巾腕！? <div>
<h2>Accounts</h2>
<ul>
<li><Link to="/netflix">Netflix</Link></li> // 同樣面睛，寫(xiě)了布局，又寫(xiě)了a標(biāo)簽
<li><Link to="/zillow-group">Zillow Group</Link></li>
<li><Link to="/yahoo">Yahoo</Link></li>
<li><Link to="/modus-create">Modus Create</Link></li>
</ul>
<Route path="/:id" component={Child}/> // 定義路由祠墅，現(xiàn)在想來(lái)侮穿，這是用地址欄傳參啊
// path里面的值是<Link>組件中的to的值歌径，毁嗦，，這個(gè)寫(xiě)法有些奇怪回铛，/:id
// 原來(lái)由路由渲染的組件都會(huì)自動(dòng)的往組件中傳遞一個(gè)參數(shù)狗准，這個(gè)參數(shù)包含了路由信息
// 而:id 是一種官方規(guī)定的寫(xiě)法，阮一峰老師的文章里是說(shuō) 這是通配符茵肃，腔长，
// http://www.ruanyifeng.com/blog/2016/05/react_router.html?utm_source=tool.lu
</div>
</Router>
)
//
// 這里的 { match } 相當(dāng)于 parameter.match 不懂的話看ES6就懂了
const Child = ({ match }) => (
<div>
<h3>ID: {match.params.id}</h3>
</div>
)
4.嵌套路由
react-router-dom 又一個(gè)新屬性 Switch
import React from 'react'
import {
BrowserRouter as Router,
Route,
Link,
Switch,
Redirect
} from 'react-router-dom'
const NoMatchExample = () => (
<Router>
<div>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/old-match">Old Match, to be redirected</Link></li>
<li><Link to="/will-match">Will Match</Link></li>
<li><Link to="/will-not-match">Will Not Match</Link></li>
<li><Link to="/also/will/not/match">Also Will Not Match</Link></li>
</ul>
<Switch>
<Route path="/" exact component={Home}/>
<Redirect from="/old-match" to="/will-match"/>
<Route path="/will-match" component={WillMatch}/>
<Route component={NoMatch}/> // 所有沒(méi)有定義的路由都會(huì)匹配N(xiāo)oMatch組件
</Switch>
</div>
</Router>
)
const Home = () => (
<p>
A <code><Switch></code> renders the
first child <code><Route></code> that
matches. A <code><Route></code> with
no <code>path</code> always matches.
</p>
)
const WillMatch = () => <h3>Matched!</h3>
const NoMatch = ({ location }) => (
<div>
<h3>No match for <code>{location.pathname}</code></h3>
</div>
)
export default NoMatchExample
5.路由傳參
this.props.history.push({pathname :"/device/list",query:{data:item})
接受參數(shù) this.props.location.query.data
