React router cache route實(shí)現(xiàn)緩存頁(yè)面流程介紹

更新時(shí)間：2023年01月10日 14:02:34 作者：山鬼taro

react-router自身沒有路由緩存的特性，在5.x版本之前，我們可以基于react-router-cache-route來(lái)實(shí)現(xiàn)路由緩存功能。但是react-router 6.x在實(shí)現(xiàn)上做了比較大的變化，react-router-cache-route沒有提供相應(yīng)的支持

一、背景

在開發(fā)中，從A頁(yè)面跳轉(zhuǎn)到other頁(yè)面，再返回A頁(yè)面時(shí)react-router會(huì)直接刷新頁(yè)面，導(dǎo)致A頁(yè)面中已加載的海量數(shù)據(jù)狀態(tài)丟失，需要重新加載，用戶體驗(yàn)不佳，所以必須將海量數(shù)據(jù)狀態(tài)進(jìn)行緩存。

（在小編的實(shí)際場(chǎng)景中，A頁(yè)面是一堆模型&業(yè)務(wù)數(shù)據(jù)標(biāo)注點(diǎn)，由于模型永遠(yuǎn)不會(huì)更改，但是加載又很緩慢，因此，希望從other頁(yè)面返回A頁(yè)面時(shí)，模型不會(huì)重新加載，但是需要更新業(yè)務(wù)數(shù)據(jù)。）

（其他應(yīng)用場(chǎng)景舉例：開發(fā)中有從詳情頁(yè)返回列表頁(yè)的需求，這樣一來(lái)頁(yè)面返回后使用react-router會(huì)直接刷新頁(yè)面，導(dǎo)致頁(yè)面中的分頁(yè)和搜索條件全部丟失，用戶體驗(yàn)不佳，所以就必須將列表頁(yè)的狀態(tài)進(jìn)行緩存。）

二、參考方法

網(wǎng)上搜索大概有幾種方法：

1、使用localStorage/sessionStorage進(jìn)行頁(yè)面的狀態(tài)的保存，跳轉(zhuǎn)頁(yè)面后再進(jìn)行獲取，這種方法雖然可行，但是從根本來(lái)說還是從新向后臺(tái)再一次請(qǐng)求了數(shù)據(jù)，不算最佳方案。

2、react-activation,嘗試未果

3、react-kepper,需要將項(xiàng)目的react-router替換掉，風(fēng)險(xiǎn)較大，慎用

4、react-router-cache-route,簡(jiǎn)單易用，最佳方案

三、react-router-cache-route的使用

就是把Switch替換成CacheSwitch,因?yàn)橐驗(yàn)镾witch組件只保留第一個(gè)匹配狀態(tài)的路由，卸載掉其他路由

把Route替換成CacheRoute

注意：other面回退A頁(yè)面時(shí)使用this.props.history.push(‘’路徑’)可以實(shí)現(xiàn)頁(yè)面的緩存

但當(dāng)使用this.props.history.go(-1)則緩存失敗

四、具體步驟

1、替換Switch和Route

靜態(tài)路由

import React,{Component} from 'react'
import { Route} from 'react-router-dom'
import {CacheRoute,CacheSwitch} from 'react-router-cache-route'
import PageA from './demo/PageA.js'
import PageB from './demo/PageB.js'
import PageOther from './demo/PageOther.js'
class App extends Component{
    render(){
        return(
            <div className='App'>
                    <CacheSwitch>                   
                        <CacheRoute exact path='/platform/PageA' component={PageA}/>                    
                        <Route path='/platform/PageB' component={PageB}/>
                        <Route path='/platform/PageOther' component={PageOther}/>                       
                    </CacheSwitch>
            </div>
        )
    }
}
export default App;

動(dòng)態(tài)路由

function AppRouter() {
    return (
        <Router history={history}>
            <AppContainer>
                <CustomHeader />
                <CacheSwitch>
                    {routes.map((route: RouteType, index: number) => {
                        return route.cache ? (
                            <CacheRoute
                                exact={true}
                                path={`/${route.routerPath}`}
                                key={index}
                                component={route.component}
                            />
                        ) : (
                            <Route
                                // strict={true}
                                exact={true}
                                path={`/${route.routerPath}`}
                                key={index}
                                component={route.component}
                            />
                        );
                    })}
                    <Redirect to="/login" />
                </CacheSwitch>
            </AppContainer>
        </Router>
    );
}

動(dòng)態(tài)理由，加判斷標(biāo)志位:cache,只有傳遞了cache頁(yè)面才能被緩存，沒有傳遞cache，就用普通路由形式

{
    path: '/PageA',
    component: PageA,
    cache:true,//判斷標(biāo)志位
},
{
    path: '/PageB',
    component: PageB,
},

2、如何更新其他想要更新的業(yè)務(wù)數(shù)據(jù)

//緩存A頁(yè)面跳轉(zhuǎn)至other頁(yè)面（）
componentDidCache = () => {
    console.log('List cached')
}
//緩存恢復(fù)（從other頁(yè)面跳轉(zhuǎn)返回A頁(yè)面）
componentDidRecover = () => {
    // 這里可以更新業(yè)務(wù)數(shù)據(jù)
    console.log('List recovered')
}

3、參考

https://github.com/CJY0208/react-router-cache-route/blob/HEAD/README_CN.md

到此這篇關(guān)于React router cache route實(shí)現(xiàn)緩存頁(yè)面流程介紹的文章就介紹到這了,更多相關(guān)React router cache route內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: