安裝
? ? ? ? yarn add react-router-dom@4.3.0 -D
? ? 引入核心路由器組件
? ? ? ? import { BrowserRouter, HashRouter } from 'react-router-dom'
? ? ? ? BrowserRouter:localhost:xxxx/user/liuna 服務(wù)器可知所有請(qǐng)求細(xì)節(jié)
? ? ? ? HashRouter:localhost:xxxx/#/user/liuna? 使用#瞄點(diǎn)純前端跳轉(zhuǎn),服務(wù)器不知請(qǐng)求細(xì)節(jié)
? ? 路由器組件:? BrowserRouter, HashRouter
? ? ? ? 它只是一個(gè)容器,用來(lái)裝所有路徑
? ? 路徑匹配組件:Router
? ? ? ? 根據(jù)path路徑,匹配對(duì)應(yīng)的組件,把組件加載到路由器組件
? ? 路由選擇組件:Switch
? ? ? ? 匹配Route,成功匹配1個(gè)Route后,則不會(huì)再往后匹配
? ? ? ? 還可以進(jìn)行失敗路徑的容錯(cuò)處理!
? ? 路由匹配的使用
? ? ? ? 1)引入核心組件
? ? ? ? ? ? import { BrowserRouter, HashRouter,Switch } from 'react-router-dom'
? ? ? ? 2)創(chuàng)建路由容器
? ? ? ? ? ? render() {
? ? ? ? ? ? ? ? return (
? ? ? ? ? ? ? ? ? ? <BrowserRouter>
? ? ? ? ? ? ? ? ? ? </BrowserRouter>
? ? ? ? ? ? ? ? )
? ? ? ? ? ? }
? ? ? ? 3)創(chuàng)建路由匹配規(guī)則
? ? ? ? ? ? render() {
? ? ? ? ? ? ? ? return (
? ? ? ? ? ? ? ? ? ? <BrowserRouter>
? ? ? ? ? ? ? ? ? ? ? ? <Switch>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <Route path='匹配路徑' component={對(duì)應(yīng)加載的組件} />
? ? ? ? ? ? ? ? ? ? ? ? ? ? <Route? component={Hello} />
? ? ? ? ? ? ? ? ? ? ? ? ? ? // exact 作用:精準(zhǔn)匹配
? ? ? ? ? ? ? ? ? ? ? ? ? ? <Route path='/' component={} />
? ? ? ? ? ? ? ? ? ? ? ? ? ? // 容錯(cuò),當(dāng)以上所有Routee都為匹配成功時(shí),會(huì)加載默認(rèn)組件
? ? ? ? ? ? ? ? ? ? ? ? ? ? <Route component={默認(rèn)組件} />
? ? ? ? ? ? ? ? ? ? ? ? </Switch>
? ? ? ? ? ? ? ? ? ? </BrowserRouter>
? ? ? ? ? ? ? ? )
? ? ? ? ? ? }
? ? ? ? 4)link組件 導(dǎo)航組件
? ? ? ? ? ? 他其實(shí)就是react-router的a標(biāo)記
? ? ? ? 使用方式同a標(biāo)簽
? ? ? ? ? ? 引入Link組件
? ? ? ? ? ? ? ? import { Link } from 'react-router-dom'
? ? ? ? ? ? 使用
? ? ? ? ? ? ? ? <Link to='跳轉(zhuǎn)的url'>導(dǎo)航的名稱</Link>
