React-router v4 路由配置方法小結(jié)
本文主要介紹了React-router v4 路由配置方法小結(jié)，分享給大家，也給自己留個(gè)筆記
一. Switch 、Router 、Route三者的區(qū)別
1、Route
Route 是建立location 和 ui的最直接聯(lián)系
2、Router
react-router v4 中，Router被拆分成了StaticRouter、MemoryRouter、BrowserRouter、HashRouter、NativeRouter。
MemoryRouter、BrowserRouter、HashRouter 等于
import { Router } from 'react-router'
<!--這里可以有三種-->
<!--history 部分源碼
exports.createBrowserHistory = _createBrowserHistory3.default;
exports.createHashHistory = _createHashHistory3.default;
exports.createMemoryHistory = _createMemoryHistory3.default;
-->
import createBrowserHistory from 'history/createBrowserHistory'
//
const history = createBrowserHistory()
<Router history={history}>
<App/>
</Router>
NativeRouter（給rn使用的）
A <Router> for iOS and Android apps built using React Native.
這里新增strict 和 exact
使用了strict location 大于等于path才能匹配,eq path='/one' location='/one/a'能匹配。
使用了exact location 約等于 path 才能匹配,eq path='/one' location='/one'或者 '/one/'能匹配，所以說(shuō)是約等于。
使用了exact 和 strict location = path才能匹配
StaticRouter(后續(xù)補(bǔ)充）
3、Switch
這是v4版本中新添加，主要用來(lái)做唯一匹配的功能。就是想要在眾多路由中只匹配其中一個(gè)路由。
二、v4 版本中路由應(yīng)該如何配置呢？
1.基本配置（這個(gè)和v3中基本一致，效果也基本一樣）
匹配 <= location eq.( /b => / + /b ) ( / => / )
<BrowserRouter forceRefresh={!supportsHistory} keyLength={12}>
<div>
<Route path="/" component={aContainer} />
<Route path="/b" component={bContainer} />
</div>
</BrowserRouter>
2.含Switch 配置
匹配 <= location eq.( /b => /b ) ( / => / ) 唯一匹配
<BrowserRouter forceRefresh={!supportsHistory} keyLength={12}>
<Switch>
//這里用exact，僅僅是擔(dān)心location被 path='/'截胡了。
<Route exact path="/" component={aContainer} />
<Route path="/b" component={bContainer} />
</Switch>
</BrowserRouter>
問(wèn)題（三個(gè)問(wèn)題）
1.如何設(shè)置公共的Component
第一種方式
<BrowserRouter forceRefresh={!supportsHistory} keyLength={12}>
<div>
<Route path="/" component={aContainer} />
<Route path="/b" component={bContainer} />
</div>
</BrowserRouter>
第二種方式(父子嵌套)
<BrowserRouter forceRefresh={!supportsHistory} keyLength={12}>
<div >
<Route path="/" component={aContainer} />
<Route path="/b" component={Parent} />
{/* {app()} */}
</div>
</BrowserRouter>
const Parent = ({ match }) => (
<div>
<Route path={`${match.url}/`} component={bContainer} />
<Route path={`${match.url}/c`} component={cContainer} />
<Route path={`${match.url}/d`} component={dContainer} />
</div>
);
這種情況 bContainer就是是公用的Component
2.如何設(shè)置getComponent，按需加載
3.是否有簡(jiǎn)化寫(xiě)法
npm install --save react-router-config
第一步 配置路由
const routes = [
{ component: bContainer,
routes: [
{ path: '/',
exact: true,
component: bContainer
},
{ path: '/b/b',
component: bContainer,
routes: [
{ path: '/b/b/b',
component: bContainer
}
]
}
]
}
]
第二步 設(shè)置路由
<BrowserRouter forceRefresh={!supportsHistory} keyLength={12}>
<div >
{renderRoutes(routes)}
</div>
</BrowserRouter>
第三步 需要在container的render中去調(diào)用方法
<div>
1111
{renderRoutes(this.props.route.routes)}
</div>
這個(gè)優(yōu)勢(shì)是可以統(tǒng)一配置，劣勢(shì)是需要在container中統(tǒng)一調(diào)用，但是這個(gè)抽出來(lái)統(tǒng)一實(shí)現(xiàn)，問(wèn)題也不大，并且還可以解決 問(wèn)題一。
這個(gè)renderRoutes實(shí)際是就是用一層Switch和多個(gè)Route來(lái)包了一層。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
手挽手帶你學(xué)React之React-router4.x的使用
這篇文章主要介紹了手挽手帶你學(xué)React之React-router4.x的使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
導(dǎo)航組件Navigator可以讓我們客戶(hù)端在不同的頁(yè)面見(jiàn)進(jìn)行切換，下面這篇文章主要給大家介紹了關(guān)于React Native中Navigator的使用方法，文中通過(guò)圖文介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-10-10
這篇文章主要給大家介紹了react聲明組件有哪幾種方法,各有什么不同,文章通過(guò)代碼示例介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-11-11
基于webpack開(kāi)發(fā)react-cli的詳細(xì)步驟
這篇文章主要介紹了基于webpack開(kāi)發(fā)react-cli的詳細(xì)步驟,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-06-06
React觸發(fā)render的實(shí)現(xiàn)方法
這篇文章主要介紹了React觸發(fā)render的實(shí)現(xiàn)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
react源碼中的生命周期和事件系統(tǒng)實(shí)例解析
這篇文章主要為大家介紹了react源碼中的生命周期和事件系統(tǒng)實(shí)例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
ReactJS實(shí)現(xiàn)表單的單選多選和反選的示例
本篇文章主要介紹了ReactJS實(shí)現(xiàn)表單的單選多選和反選的示例，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-10-10
這篇文章主要介紹了React精髓！一篇全概括小結(jié)(急速)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-05-05
這篇文章主要介紹了React中的for循環(huán)解讀，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
本文介紹了如何搭建一個(gè)React項(xiàng)目,包括創(chuàng)建項(xiàng)目、去除無(wú)用文件夾、配置項(xiàng)目、安裝craco擴(kuò)展webpack配置、配置代碼格式化、創(chuàng)建路由、集成Redux等步驟,感興趣的朋友跟隨小編一起看看吧2025-01-01