请问有和react-routerV6配合使用的demo吗

[yongchaozeng]

请问有和react-routerV6配合使用的demo吗

[CJY0208]

暂时没有，原理差不多，可能需要使用 useOutlet 而不是 <Outlet />，如下

import { useLocation, useOutlet } from 'react-router-dom'
import { KeepAlive } from 'react-activation'

function Layout() {
  const location = useLocation()
  const outlet = useOutlet()

  return (
    <KeepAlive key={location.key}>
      {outlet}
    </KeepAlive>
  )
}

[yongchaozeng]

暂时没有，原理差不多，可能需要使用 useOutlet 而不是 <Outlet />，如下

import { useLocation, useOutlet } from 'react-router-dom'
import { KeepAlive } from 'react-activation'

function Layout() {
  const location = useLocation()
  const outlet = useOutlet()

  return (
    <KeepAlive key={location.key}>
      {outlet}
    </KeepAlive>
  )
}

感谢大佬这么快的回复，目前我就是如此使用，但是在微前端使用的时候会出现一种场景，从A切换到B因为basename变化，导致之前A应用的layout也会销毁，缓存的路由就全失效了，这里和react-activation可能都没有关系了。不过还是想请教下大佬。我个人的想法是看能不能劫持history.pushState来拦截

[CJY0208]

微应用场景下可能需要基座这边对子应用也 keep alive 一下，如果子应用被干掉了那子应用里的 AliveScope 也没了，缓存就没了

[shenjunru]

欢迎试用 react-fiber-keep-alive，一个基于 react fiber 的 keep-alive 实现

[Aaron52077]

请问有和react-routerV6配合使用的demo吗

https://wuli-admin.gitee.io/react-mat-pro/#/dashboard 体验下，支持了iframe缓存

[liujie3612]

暂时没有，原理差不多，可能需要使用 useOutlet 而不是 <Outlet />，如下

import { useLocation, useOutlet } from 'react-router-dom'
import { KeepAlive } from 'react-activation'

function Layout() {
  const location = useLocation()
  const outlet = useOutlet()

  return (
    <KeepAlive key={location.key}>
      {outlet}
    </KeepAlive>
  )
}

这个我试了，不过还是有异常，具体是刷新进到A页面，A跳到B，再切回A，A每次都会重新render B页面能缓存住，麻烦大佬尽快兼容下react-routerV6呢，我们项目用的umi4，默认使用了react-routerV6 目前keep-alive的特性先去掉了