Giter Club home page Giter Club logo

Comments (20)

GoodLuckAlien avatar GoodLuckAlien commented on June 27, 2024

1.引入进来提示invariant未安装 需要手动安装
2.安装完后跑起来没有报错 但也没有缓存路由

感谢您的宝贵意见,第一个问题已经解决,会发布新版本 , 第二个问题 我想问一下外层是否没有 KeepliveRouterSwitch 包裹呢,如果有的话 ,可以复制一下代码。

from react-keepalive-router.

pk110 avatar pk110 commented on June 27, 2024

image
image

from react-keepalive-router.

GoodLuckAlien avatar GoodLuckAlien commented on June 27, 2024

1.引入进来提示invariant未安装 需要手动安装
2.安装完后跑起来没有报错 但也没有缓存路由

您好,这个问题已经修复,1.0.7+版本已经发布 , 原因就是跨层级route问题 ,上一个版本没有处理,另外 KeepliveRouterSwitch 改名为 KeepaliveRouterSwitch KeepliveRoute 改名为 KeepaliveRoute为了方便您使用,我根据你的代码写了一个demo,供参考

import { KeepaliveRouterSwitch ,KeepaliveRoute  } from 'react-keepalive-router'
const RouteWithSubRoutes = (item)=> <div style={{ background:'pink' }} > <KeepaliveRoute path={item.path} component={ item.component } ></KeepaliveRoute>  </div>

const index = () => {
  return <div >
    <div >
      <Router  >
      <Meuns/>
      <KeepaliveRouterSwitch>
          {
            [{ path:'/detail' ,component:Detail }].map(item=> <RouteWithSubRoutes key={item.path} {...item}  />)
          }
          <Route path={'/index'} component={Index} ></Route>
          <Route path={'/list'} component={List} ></Route>
          {/*  路由不匹配,重定向到/index  */}
          <Redirect from='/*' to='/index' />
       </KeepaliveRouterSwitch>
      </Router>
    </div>
  </div>
}

from react-keepalive-router.

pk110 avatar pk110 commented on June 27, 2024

组件内部传入的属性props 不再具有props.history功能 请问怎么跳转呢

from react-keepalive-router.

GoodLuckAlien avatar GoodLuckAlien commented on June 27, 2024

组件内部传入的属性props 不再具有props.history功能 请问怎么跳转呢

现在可以用 react-router-domwithRouter 包裹组件解决这个问题。react-keepalive-router内部也引用了react-router-dom依赖, 稍后我会处理这个问题,感谢您的宝贵问题🙏🙏🙏。demo奉上

import { withRouter } from  'react-router-dom'

function index(props) {
    console.log(props)
    return <div>
        demo
    </div>
}
export default withRouter(index) 

from react-keepalive-router.

pk110 avatar pk110 commented on June 27, 2024

厉害 现在整个流程可以走通了 如果后续发现问题也会及时反馈 非常感谢

from react-keepalive-router.

GoodLuckAlien avatar GoodLuckAlien commented on June 27, 2024

厉害 现在整个流程可以走通了 如果后续发现问题也会及时反馈 非常感谢

好的 ,非常感谢您的及时反馈,这个项目,刚开始做,后续会完善功能,后续功能从页面到组件,你们的反馈是我前进方向与动力🙏🙏🙏。一起加油,一起努力❤️❤️❤️

from react-keepalive-router.

pk110 avatar pk110 commented on June 27, 2024

image

a页面跳到b页面 a.b页面都缓存了 并且在进入页面时都打印了props 当在b返回a时做清除b页面操作

回到a页面 props打印出来cacheState确实清除了b页面信息 但是同时也打印了b页面的props 并且b页面的cacheState里有a.b两个页面信息 b页面还是缓存着在 麻烦看一下 版本1.0.7

from react-keepalive-router.

GoodLuckAlien avatar GoodLuckAlien commented on June 27, 2024

image

a页面跳到b页面 a.b页面都缓存了 并且在进入页面时都打印了props 当在b返回a时做清除b页面操作

回到a页面 props打印出来cacheState确实清除了b页面信息 但是同时也打印了b页面的props 并且b页面的cacheState里有a.b两个页面信息 b页面还是缓存着在 麻烦看一下 版本1.0.7

您好,react-keepalive-router 有一个缓存周期,目的就是在后续加入组件/页面缓存生命周期使用,当调用 清除方法的时候,只是加了销毁状态,但是此时页面并没有销毁,销毁是再下一次进入destory页面的时候销毁之前的状态,这样做当初是为了避免在路由跳转时候,触发销毁功能,导致一次不必要重复的渲染,但是这样做也确实造成了一些副作用,我会尽快解决这个问题。

修复后 ,我会第一时间通知您。

from react-keepalive-router.

pk110 avatar pk110 commented on June 27, 2024

好的 非常感谢

from react-keepalive-router.

GoodLuckAlien avatar GoodLuckAlien commented on June 27, 2024

好的 非常感谢

hello,您好,发布1.0.9版本,解决了之前留下的两个问题:
1 嵌套路由 , histoy ,location 对象丢失问题。
2 当调用销毁状态后,cacheState保留问题,为了防止篡改cacheStatecacheState不对外暴露。

感谢您的支持~~~

from react-keepalive-router.

pk110 avatar pk110 commented on June 27, 2024

您好
1.最新版本调用销毁,并没有销毁掉 ,销毁方法的唯一标识是路由path吗 如果是调用全部销毁方法,第一次会清掉,后面重复切换页面还是会缓存下来呢
2.两个竖直方向滚动可以向下加载的列表页面,当其中一个页面向下滚动加载时,会触发另外一个页面的向下加载请求?
麻烦有时间看一下 感谢

from react-keepalive-router.

GoodLuckAlien avatar GoodLuckAlien commented on June 27, 2024

您好
1.最新版本调用销毁,并没有销毁掉 ,销毁方法的唯一标识是路由path吗 如果是调用全部销毁方法,第一次会清掉,后面重复切换页面还是会缓存下来呢
2.两个竖直方向滚动可以向下加载的列表页面,当其中一个页面向下滚动加载时,会触发另外一个页面的向下加载请求?
麻烦有时间看一下 感谢

hello ,您好 , 我这就看,感谢您的反馈 ,第一时间通知,这边您方便提供一下 销毁缓存的代码吗

from react-keepalive-router.

pk110 avatar pk110 commented on June 27, 2024

image
image

from react-keepalive-router.

GoodLuckAlien avatar GoodLuckAlien commented on June 27, 2024

您好
1.最新版本调用销毁,并没有销毁掉 ,销毁方法的唯一标识是路由path吗 如果是调用全部销毁方法,第一次会清掉,后面重复切换页面还是会缓存下来呢
2.两个竖直方向滚动可以向下加载的列表页面,当其中一个页面向下滚动加载时,会触发另外一个页面的向下加载请求?
麻烦有时间看一下 感谢

好的 我这边尽快处理问题 ,第一时间通知您

from react-keepalive-router.

pk110 avatar pk110 commented on June 27, 2024

好的

from react-keepalive-router.

GoodLuckAlien avatar GoodLuckAlien commented on June 27, 2024

好的

您好,最近有点忙让您久等了,react-keepalive-router 发布1.1.0版本了,修复的问题有

1 用 prop.cacheDispatch 缓存路由失败问题。滚动问题(还需要进行大量测试)。

2 跨层级路由,路由匹配问题。

3 switch组件中加入了key,防止diff过程中,组件被缓存,切换页面,无法正常跳转问题

from react-keepalive-router.

Lyfme avatar Lyfme commented on June 27, 2024

cacheId在哪里定义的,reademe里面没看到啊,还是就是字符串'cacheId'啊

from react-keepalive-router.

GoodLuckAlien avatar GoodLuckAlien commented on June 27, 2024

cacheId在哪里定义的,reademe里面没看到啊,还是就是字符串'cacheId'啊

您好,cacheId 就是在 keepliveRoute 标签中定义,作为整个 缓存状态的 key ,如果没有,会默认选择 path路由路径作为key,稍后我会详细更新 reademe

from react-keepalive-router.

GoodLuckAlien avatar GoodLuckAlien commented on June 27, 2024

cacheId在哪里定义的,reademe里面没看到啊,还是就是字符串'cacheId'啊

from react-keepalive-router.

Related Issues (17)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.