React-router v4 路由配置方法小結(jié)
本文主要介紹了React-router v4 路由配置方法小結(jié)，分享給大家，也給自己留個筆記
一. 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/'能匹配，所以說是約等于。
使用了exact 和 strict location = path才能匹配
StaticRouter(后續(xù)補充）
3、Switch
這是v4版本中新添加，主要用來做唯一匹配的功能。就是想要在眾多路由中只匹配其中一個路由。
二、v4 版本中路由應(yīng)該如何配置呢？
1.基本配置（這個和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>
問題（三個問題）
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.是否有簡化寫法
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>
這個優(yōu)勢是可以統(tǒng)一配置，劣勢是需要在container中統(tǒng)一調(diào)用，但是這個抽出來統(tǒng)一實現(xiàn)，問題也不大，并且還可以解決 問題一。
這個renderRoutes實際是就是用一層Switch和多個Route來包了一層。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了React自定義視頻全屏按鈕實現(xiàn)全屏功能，通過繪制全屏按鈕，并綁定點擊事件，編寫點擊事件，通過實例代碼給大家詳細(xì)講解,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了vant2 自動檢查表單驗證 -validate,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-10-10
React服務(wù)端渲染和同構(gòu)的實現(xiàn)
本文主要介紹了React服務(wù)端渲染和同構(gòu)的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
這篇文章主要為大家詳細(xì)介紹了React列表欄及購物車組件使用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
這篇文章主要介紹了記錄一次完整的react hooks實踐，通過一個簡單示例，介紹了react hooks，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-03-03
這篇文章主要給大家介紹了關(guān)于react-router中<Link/>屬性的相關(guān)資料，文中介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。2017-06-06
阿里低代碼框架lowcode-engine自定義設(shè)置器詳解
這篇文章主要為大家介紹了阿里低代碼框架lowcode-engine自定義設(shè)置器示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
react事件綁定時。this并不會指向當(dāng)前DOM元素。往往使用bind來改變this指向，今天通過本文給大家介紹React事件綁定的方式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-02-02
在Create React App中啟用Sass和Less的方法示例
這篇文章主要介紹了在Create React App中啟用Sass和Less的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
這篇文章主要介紹了React配置代理服務(wù)器的5種方法,無論使用哪種方法,都需要確保代理服務(wù)器的地址和端口正確,并且在配置完成后重新啟動React開發(fā)服務(wù)器,使配置生效,需要的朋友可以參考下2023-08-08