react-router實現(xiàn)按需加載
本文使用的 React-router 版本為 2.8.1
React Router自己就有一套按需加載解決方案，將代碼拆分成多個小包，在瀏覽過程中實現(xiàn)按需加載；
如過你的項目搭配了webpack打包工具，那么需要在webpack.config.js的output內(nèi)加上chunkFilename
output: {
path: path.join(__dirname, '/../dist/assets'),
filename: 'app.js',
publicPath: defaultSettings.publicPath,
// 添加 chunkFilename
chunkFilename: '[name].[chunkhash:5].chunk.js',
},
name是代碼里創(chuàng)建chunk指定的名字，如果代碼中沒有指定，則webpack會默認(rèn)分配id號碼作為name；
chunkhash是文件的hash碼，因為hash碼比較長，所以這里只取前五位。
我們需要讓路由動態(tài)加載組件，需要將 component 換成 getComponent。首先將路由拆出來，創(chuàng)建一個根路由 rootRoute：
const rootRoute = {
path: '/',
indexRoute: {
getComponent(nextState, cb) {
require.ensure([], (require) => {
cb(null, require('components/layer/HomePage'))
}, 'HomePage')
},
},
getComponent(nextState, cb) {
require.ensure([], (require) => {
cb(null, require('components/Main'))
}, 'Main')
},
childRoutes: [
require('./routes/baidu'),
require('./routes/404'),
require('./routes/redirect')
]
}
ReactDOM.render(
(
<Router
history={browserHistory}
routes={rootRoute}
/>
), document.getElementById('root')
);
這里有四個屬性：
path
不用多說，匹配路由；
getComponent
對應(yīng)于以前的 component 屬性，但是這個方法是異步的，也就是當(dāng)路由匹配時，才會調(diào)用這個方法。
這里面有個 require.ensure 方法
require.ensure(dependencies, callback, chunkName)
這是 webpack 提供的方法，這也是按需加載的核心方法。第一個參數(shù)是依賴，第二個是回調(diào)函數(shù)，第三個就是上面提到的 chunkName，用來指定這個 chunk file 的 name。
indexRoute
用來設(shè)置主頁。（單獨抽離主頁）
注意這里的 indexRoute 寫法， 這是個對象，在對象里面使用 getComponent。
childRoutes
子路由
這里面放置的就是子路由的配置，對應(yīng)于以前的子路由們。我們將以前的 /baidu、/404 和 * 都拆了出來，接下來將分別為他們創(chuàng)建路由配置。
路由控制
上面的childRoutes 里面，我們 require 了三個子路由，在目錄下創(chuàng)建 routes 目錄，將這三個路由放置進(jìn)去。
routes/ ├── 404 │ └── index.js ├── baidu │ ├── index.js │ └── routes │ ├── frequency │ │ └── index.js │ └── result │ └── index.js └── redirect └── index.js
和 rootRoute 類似，里面的每個 index.js 都是一個路由對象：
/404/index.js
module.exports = {
path: '404',
getComponent(nextState, cb) {
require.ensure([], (require) => {
cb(null, require('components/layer/NotFoundPage'))
}, 'NotFoundPage')
}
}
/baidu/index.js
module.exports = {
path: 'baidu',
getChildRoutes(partialNextState, cb) {
require.ensure([], (require) => {
cb(null, [
require('./routes/result'),
require('./routes/frequency')
])
})
},
getComponent(nextState, cb) {
require.ensure([], (require) => {
cb(null, require('components/layer/BaiduPage'))
}, 'BaiduPage')
}
}
/baidu/routes/frequency/index.js
module.exports = {
path: 'frequency',
getComponent(nextState, cb) {
require.ensure([], (require) => {
cb(null, require('components/layer/BaiduFrequencyPage'))
}, 'BaiduFrequencyPage')
}
}
等················
下面來說一下設(shè)置Redirect
我們需要把這個重定向的路由單獨拆出來，也就是 * 這個路由，我們上面已經(jīng)為他創(chuàng)建了一個 redirect 目錄。這里使用到 onEnter 方法，然后在這個方法里改變路由狀態(tài)，調(diào)到另外的路由，實現(xiàn) redirect ：
/redirect/index.js官方例子
module.exports = {
path: '*',
onEnter: (_, replaceState) => replaceState(null, "/404")
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要介紹了react合成事件與原生事件的相關(guān)概念，幫助大家區(qū)分這兩種事件，學(xué)習(xí)react的同學(xué)不妨了解下2021-05-05
使用React?Redux實現(xiàn)React組件之間的數(shù)據(jù)共享
在復(fù)雜的React應(yīng)用中,組件之間的數(shù)據(jù)共享是必不可少的,為了解決這個問題,可以使用React?Redux來管理應(yīng)用的狀態(tài),并實現(xiàn)組件之間的數(shù)據(jù)共享,在本文中,我們將介紹如何使用React?Redux實現(xiàn)Count和Person組件之間的數(shù)據(jù)共享,需要的朋友可以參考下2024-03-03
這篇文章主要給大家介紹了React實現(xiàn)一個拖拽排序組件?-?支持多行多列、支持TypeScript、支持Flip動畫、可自定義拖拽區(qū)域,文章通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11
React?Hooks中?useRef和useImperativeHandle的使用方式
這篇文章主要介紹了React?Hooks中?useRef和useImperativeHandle的使用方式,文中說明了useRef和useCallback一起使用,?可以解決閉包陷阱的問題,本文結(jié)合實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10
詳解如何在React中優(yōu)雅的使用addEventListener
這篇文章主要為大家詳細(xì)介紹了如何在React中優(yōu)雅的使用addEventListener，文中的示例代碼簡潔易懂，對大家學(xué)習(xí)React有一定的幫助，需要的可以參考一下2023-01-01
這篇文章主要為大家介紹了React 遠(yuǎn)程動態(tài)組件實踐示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
這篇文章主要介紹了React基于RBAC的權(quán)限控制,通過定義角色和權(quán)限、編寫權(quán)限檢查函數(shù)以及在路由、組件和選擇控件中使用這些函數(shù),可以靈活地控制應(yīng)用中的訪問權(quán)限,需要的朋友可以參考下2024-05-05
這篇文章主要為大家介紹了React?Suspense解決競態(tài)條件詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
生命周期函數(shù)指在某一時刻組件會自動調(diào)用并執(zhí)行的函數(shù)。React每個類組件都包含生命周期方法，以便于在運行過程中特定的階段執(zhí)行這些方法2022-11-11
這篇文章主要介紹了react 創(chuàng)建單例組件的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04