react-router-v4
一茬末、簡介
一切皆組件
react-router在這個(gè)版本被拆分成了三個(gè)包
- react-router （核心庫）
- react-router-dom （瀏覽器環(huán)境）
- react-router-native （react-native環(huán)境）
二厂榛、基本概念
- 安裝
基于web瀏覽器開發(fā)盖矫，所以只需要引入react-router-dom
npm install -S react-router-dom
or
yarn add react-router-dom
- 官方示例
- 引入并擬寫基本結(jié)構(gòu)
import React from 'react'
import {BrowserRouter as Router,Route,Link} from 'react-router-dom'
const BasicExample = () => (
<Router>
<div>
<ul>
<li><Link to="/">首頁</Link></li>
<li><Link to="/about">關(guān)于</Link></li>
<li><Link to="/topics">主題列表</Link></li>
</ul>
<hr/>
<Route exact path="/" component={Home}/>
<Route path="/about" component={About}/>
<Route path="/topics" component={Topics}/>
</div>
</Router>
)
注:
BrowserRouter(路由器)
Route(路由)
exact：唯一匹配，僅匹配"/",否則會(huì)同時(shí)匹配"/"和"/xxx"
path：路徑
component：路徑匹配后所要渲染的組件
Link(鏈接 想象成<a>標(biāo)簽)
- Home及About組件實(shí)現(xiàn)
const Home = () => (
<div>
<h2>首頁</h2>
</div>
)
const About = () => (
<div>
<h2>關(guān)于</h2>
</div>
)
- Topics及Topic組件實(shí)現(xiàn)
const Topics = ({ match }) => (
<div>
<h2>主題列表</h2>
<ul>
<li>
<Link to={`${match.url}/rendering`}>
使用 React 渲染
</Link>
</li>
<li>
<Link to={`${match.url}/components`}>
組件
</Link>
</li>
<li>
<Link to={`${match.url}/props-v-state`}>
屬性 v. 狀態(tài)
</Link>
</li>
</ul>
<Route path={`${match.url}/:topicId`} component={Topic}/>
<Route exact path={match.url} render={() => (
<h3>請(qǐng)選擇一個(gè)主題击奶。</h3>
)}/>
</div>
)
const Topic = ({ match }) => (
<div>
<h3>{match.params.topicId}</h3>
</div>
)
注:
match(匹配Route加載的組件所獲取的一個(gè)對(duì)象參數(shù))
isExact: 是否是全等匹配
params: path正則解析后的值對(duì)象
path: 路由的地址
url: 與當(dāng)前l(fā)ocation路徑名所匹配部分
三辈双、基本概念
-
Router（路由器）
- BrowserRouter （由服務(wù)器來管理動(dòng)態(tài)請(qǐng)求時(shí)使用，h5的history）
- HashRouter （靜態(tài)網(wǎng)站柜砾，老版本瀏覽器的history）
- MemoryRouter （主要用于服務(wù)器渲染湃望。它創(chuàng)建一個(gè)內(nèi)存中的history對(duì)象，不與瀏覽器URL互動(dòng)）
-
<Route>（路由）
exact: propType.bool （是否是唯一匹配）
path: propType.string （路徑痰驱，如果沒有賦值证芭，則默認(rèn)渲染指定的component）
component: propType.func （常用）
一個(gè)React組件。當(dāng)帶有component參數(shù)的route匹配成功后担映，route會(huì)返回一個(gè)新的元素废士，其為component參數(shù)所對(duì)應(yīng)的React組件（使用React.createElement創(chuàng)建）。
例: Route path='/page' component={Page} />- render: propType.func （常用）
當(dāng)?shù)刂菲ヅ涑晒笳{(diào)用該函數(shù)蝇完。該過程與傳入component參數(shù)類似官硝，并且對(duì)于行級(jí)渲染與需要向元素傳入額外參數(shù)的操作會(huì)更有用。最后返回一個(gè)React element短蜕。
例: const extraProps = { color: 'red' } <Route path='/page' render={(props) => ( <Page {...props} data={extraProps}/> )}/>- children：propType.func （不常用氢架，一般用在path無法匹配時(shí)呈現(xiàn)的'空'狀態(tài)）
一個(gè)返回React element的函數(shù)。與上述兩個(gè)參數(shù)不同朋魔，無論route是否匹配當(dāng)前l(fā)ocation岖研，其都會(huì)被渲染。
<Route path='/page' children={(props) => ( props.match ? <Page {...props}/> : <EmptyPage {...props}/> )}/>- 其他屬性看官方文檔
-
match（匹配Route加載的組件所獲取的一個(gè)對(duì)象參數(shù)）
- isExact: 是否是全等匹配
- params: 由pathToRegexp解析path后所組成的一個(gè)對(duì)象
//通過pathToRegexp解析path const match = re.exec(pathname) if (!match) return null const [ url, ...values ] = match const isExact = pathname === url //如果exact為true警检，需要pathname===url if (exact && !isExact) return null return { path, url: path === '/' && url === '' ? '/' : url, isExact, params: keys.reduce((memo, key, index) => { memo[key.name] = values[index] return memo }, {}) }pathToRegexp解析path: var keys = [] var re = pathToRegexp('/foo/:bar', keys) // re = /^\/foo\/([^\/]+?)\/?$/i // keys = [{ name: 'bar', prefix: '/', delimiter: '/', optional: false, repeat: false, pattern: '[^\\/]+?' }]- path: 路由的地址
- url: 與當(dāng)前l(fā)ocation路徑名所匹配部分
-
<Link>
*URL會(huì)更新孙援，組件會(huì)被重新渲染，但是頁面不會(huì)重新加載
- to:
propType.string
需要跳轉(zhuǎn)到的路徑(pathname)或地址（location）
<Link to="/about">關(guān)于</Link> <Link to="/courses"/>propType.obj
<Link to={{ pathname: '/courses', search: '?sort=name', hash: '#the-hash', state: { fromDashboard: true } }}/>- replace: PropTypes.bool
為 true 時(shí)解滓，點(diǎn)擊鏈接后將使用新地址替換掉訪問歷史記錄里面的原地址赃磨。 為 false 時(shí)，點(diǎn)擊鏈接后將在原有訪問歷史記錄的基礎(chǔ)上添加一個(gè)新的紀(jì)錄洼裤。 默認(rèn)為 false邻辉。 <Link to="/courses" replace /> -
<Switch>
將僅渲染第一個(gè)匹配的路由
import { Switch, Route } from 'react-router' <Switch> <Route exact path="/" component={Home}/> <Route path="/about" component={About}/> <Route path="/:user" component={User}/> <Route component={NoMatch}/> </Switch>否則會(huì)渲染所有匹配的路由
