React模拟实现Vue的keepAlive功能

yarn add react-activation
# 或者
npm install react-activation

import { render } from 'react-dom';
import { AliveScope } from 'react-activation';
render(
  <AliveScope>
    <Router>
      <App />
    </Router>
  </AliveScope>,
  document.getElementById('root')
);

export const routes = [
  {
    path: '/',
    element: <Home />,
    keepAlive: true
  },
  {
    path: '/home',
    element: <Home />,
    keepAlive: true
  },
  {
    path: '/xxx',
    element: <Index2 />
  },
]

function App() {
const location = useLocation();
const route = useRoutes(
    routes.map(item => ({
      ...item,
      element: item.keepAlive ? (
        <KeepAlive cacheKey={item.path}>{item.element}</KeepAlive>
      ) : (
        item.element
      )
    }))
  );
  // 这里根据是否为首页设置z-50是因为在首页有多个Popup,缓存了首页后点击Popup的里面内容跳转别的页面，这个Popup因为层级很高，并且和root是同级节点所以会一直存在，所以给这些Popup也要设置层级z-10,这样在跳转至别的页面时，这些Popup的层级10没有50高就不会出现
return (
	<div
         className={`w-full h-screen flex justify-center  bg-primary  relative ${
           location.pathname === '/home' || location.pathname === '/'
             ? ''
             : 'z-50'
         }`}
       >
        <div className="w-[393px] h-screen">
        {route}
        </div>
    </div>
	)
}