React中使用react-router-cache-route缓存页面状态

这篇具有很好参考价值的文章主要介绍了React中使用react-router-cache-route缓存页面状态。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、背景

在开发中,从A页面跳转到other页面,再返回A页面时react-router会直接刷新页面,导致A页面中已加载的海量数据状态丢失,需要重新加载,用户体验不佳,所以必须将海量数据状态进行缓存。
(在小编的实际场景中,A页面是一堆模型&业务数据标注点,由于模型永远不会更改,但是加载又很缓慢,因此,希望从other页面返回A页面时,模型不会重新加载,但是需要更新业务数据。)
(其他应用场景举例:开发中有从详情页返回列表页的需求,这样一来页面返回后使用react-router会直接刷新页面,导致页面中的分页和搜索条件全部丢失,用户体验不佳,所以就必须将列表页的状态进行缓存。)

二、参考方法

网上搜索大概有几种方法:
1、使用localStorage/sessionStorage进行页面的状态的保存,跳转页面后再进行获取,这种方法虽然可行,但是从根本来说还是从新向后台再一次请求了数据,不算最佳方案。
2、react-activation,尝试未果
3、react-kepper,需要将项目的react-router替换掉,风险较大,慎用
4、react-router-cache-route,简单易用,最佳方案

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

就是把Switch替换成CacheSwitch,因为因为Switch组件只保留第一个匹配状态的路由,卸载掉其他路由
把Route替换成CacheRoute
注意:other面回退A页面时使用this.props.history.push(‘’路径’)可以实现页面的缓存
但当使用this.props.history.go(-1)则缓存失败

四、具体步骤

1、替换Switch和Route
静态路由

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;

动态路由

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>
    );
}

动态理由,加判断标志位:cache,只有传递了cache页面才能被缓存,没有传递cache,就用普通路由形式

{
    path: '/PageA',
    component: PageA,
    cache:true,//判断标志位
},
{
    path: '/PageB',
    component: PageB,
},

2、如何更新其他想要更新的业务数据

//缓存A页面跳转至other页面()
componentDidCache = () => {
    console.log('List cached')
}
//缓存恢复(从other页面跳转返回A页面)
componentDidRecover = () => {
    // 这里可以更新业务数据
    console.log('List recovered')
}

3、参考
https://github.com/CJY0208/react-router-cache-route/blob/HEAD/README_CN.md文章来源地址https://www.toymoban.com/news/detail-412315.html

到了这里,关于React中使用react-router-cache-route缓存页面状态的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • react的redux和router的使用案例讲解

    react的redux和router的使用案例讲解 安装依赖: 首先,你需要安装一些必要的依赖项。使用以下命令安装Redux、React Redux和React Router: 配置Redux Store: 创建一个Redux store来管理应用程序的状态。在这个案例中,我们将存储待办事项列表和当前选定的待办事项。 使用Redux: 在Reac

    2024年01月22日
    浏览(54)
  • 【退役之重学前端】使用vite+vue3+vue-router,重构react+react-router前后端分离的商城后台管理系统

    前言: 对前端各个技术板块,HTML、CSS、JavaScript、ES6、vue家族,整体上能“摸其大概”。笔者计划重构一个基于react的商城后台管理系统。 —— 2024年2月16日 vue3 sass bootstrap ES7 前后端分离 分层架构 模块化开发 npm vite git

    2024年02月20日
    浏览(55)
  • 【React Router】React Router学习笔记

    React Router 是一个基于 React 之上的强大路由库,它可以让你向应用中快速地添加视图和数据流,同时保持页面与 URL 间的同步。 React Router 知道如何为我们搭建嵌套的 UI,因此我们不用手动找出需要渲染哪些 Child 组件。 获取URL参数。当渲染组件时,React Router 会自动向 Route 组件

    2024年02月08日
    浏览(33)
  • React Route5 路由

    💻 React Route5 路由🏠专栏:React 👀个人主页:繁星学编程🍁 🧑个人简介:一个不断提高自我的平凡人🚀 🔊分享方向:目前主攻前端,其他知识也会阶段性分享🍀 👊格言:☀️没有走不通的路,只有不敢走的人!☀️ 👉让我们一起进步,一起成为更好的自己!!!🎁

    2024年02月15日
    浏览(26)
  • 【React】React-router路由

    路由是根据不同的url地址展示不同的内容或页面 注: 一个针对react设计的路由解决方案,可以友好的帮助解决React components到URL之间的同步映射关系 导入路由 注:路由模式有 HashRouter 和 BrowserRouter 两种模式,其中BrowserRouter的路径没有#,样式好看,真正朝后端发请求,后端若

    2023年04月17日
    浏览(57)
  • 【React】react-router 路由详解

    🚩🚩🚩 💎个人主页: 阿选不出来 💨💨💨 💎个人简介: 一名大二在校生,学习方向前端,不定时更新自己学习道路上的一些笔记. 💨💨💨 💎目前开发的专栏: JS 🍭Vue🍭React🍭 💨💨💨 前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做,根据不同的url地

    2024年02月01日
    浏览(38)
  • React-路由 react-router-dom

    前端路由的功能:让用户从一个页面跳转到另一个页面。 前端路由是一套映射规则 ,在 React 中, 是 URL 路径与组件的对应关系 。 使用 React 路由简单来说就是配置 路径与组件(配对) 。 路由的本质: 一个路径 path 对应唯一的一个组件 component 当我们访问一个 path 自动把 p

    2024年02月02日
    浏览(40)
  • React 路由react-router-dom详解

    前面我们先了解一下 路由是什么? 路由分类有哪些?内置API有哪些 ? 可能有点枯燥,不喜欢看的直接跳过 ! 单页Web应用(single page web application,SPA)。 整个应用只有一个完整的页面。 点击页面中的链接不会刷新页面,只会做页面的局部更新。 数据都需要通过ajax请求获取

    2023年04月11日
    浏览(39)
  • 创建react脚手架项目——demo(react18 + react-router 6)+ react项目打包部署

    全局安装 create-react-app 说明:不建议安装全局,建议使用 npx 命令安装,具体可参考官网,如下: 官网: https://zh-hans.legacy.reactjs.org/docs/create-a-new-react-app.html. 1.2.1 问题1——npm ERR! code ENOTFOUND(网络问题clashx) 问题描述,如下: 解决问题——方式1 如果使用了clashx,可能是它

    2024年02月07日
    浏览(69)
  • 怎么理解React Router

    React Router就是实现不用刷新的条件下切换不同页面。路由的本质是页面URL发生改变,页面的显示结果也发生改变,但是页面不会刷新。 React Router分为几个部分: React-Router:实现了路由核心部分功能; React-Router-dom:基于react-router,加入了在浏览器运行环境下的一些功能; r

    2024年04月27日
    浏览(27)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包