前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >React-keeper的使用方法(坑多)

React-keeper的使用方法(坑多)

作者头像
biaoblog.cn 个人博客
发布2022-08-11 19:03:05
6990
发布2022-08-11 19:03:05
举报
文章被收录于专栏:web技术开发分享

1.安装react-keeper

代码语言:javascript
复制
$ npm i react-keeper --save

2.在项目中进行引入

代码语言:javascript
复制
import { HashRouter,Route,Link } from 'react-keeper'

配置路由

注意:在使用react-keeper时,通过react-keeper引用的组件(Route,Link)都必须在HashRouter包裹之中,

           并且HashRouter最外层还需要一个div

代码语言:javascript
复制
 <div>
       {/*路由容器  */}
    <HashRouter>
         <div>
            <Route cache path="/" exact component = {Index} />
               <Route path="/say"  component = {Say} />
                <Route path="/picture"  component = {Picture} />
                <Route path="/me"  component = {Me} />
                <Route path="/bookInfo"  component = {bookInfo} />   
                {/* // 菜单栏  */}
              <div className="menu">
                    <ul>
                        <li><Link to="/">文章</Link></li>
                        <li><Link to="/say">心情</Link></li>
                        <li><Link to="/picture">照片墙</Link></li>
                        <li><Link to="/me">关于我</Link></li>
                    </ul>
                </div>
         </div>
     </HashRouter>
  </div>
cache属性可以添加属性值,React-Keeper支持的属性值有root(default)、parent。
cache='root'(或cache)为永久缓存,只要根组件不解绑,页面将永久缓存。
cache='parent'为父组件缓存,在父组件不解绑的情况下会维持缓存状态。

3.路由跳转与传参

引入Control

代码语言:javascript
复制
import { Control } from 'react-keeper'

回到上一页

代码语言:javascript
复制
Control.go(-1)

也通过这样跳转,并传递参数

代码语言:javascript
复制
 Control.go("bookInfo",{ID:ID})

接收参数

代码语言:javascript
复制
Control.state.ID

传统方式:    

代码语言:javascript
复制
 this.props.history.push({
             pathname:"bookInfo",
             query:{ID:ID}
      })

传统接手参数

代码语言:javascript
复制
this.props.location.query.ID

相关参考文章:

https://segmentfault.com/a/1190000016621746?utm_source=tag-newest

https://www.jianshu.com/p/46d55400fb89

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1.安装react-keeper
  • 2.在项目中进行引入
  • 3.路由跳转与传参
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档