React Router路由级KeepAlive

ReactRouter6.4发布了DataAPI之后，我们可以很轻松实现路由KeepAlive。

首先我们安装 keepalive-react-router， 这是一个基于 ReactRouter DataAPI 的缓存解决方案，使用很简单，在 Root根路由中加入对应组件即可：

// root.tsx
import { KeepAlive, KeepAliveProvider } from 'keepalive-react-router'

export function Root() {
  return (
    <>
      <KeepAliveProvider>
        <KeepAlive />
      </KeepAliveProvider>
    </>
  )
}

在需要缓存的路由组件中，设置 handle: { keepAlive: true } 即可

import {
  createBrowserRouter,
  createRoutesFromElements,
  Route,
  RouterProvider,
} from 'react-router-dom'


const router = createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<Root />}>
      <Route path="dashboard" element={<Dashboard />} 
        handle={{ keepAlive: true }}
      />
    </Route>
  )


ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
)

这个库有在线DEMO，也有详细的使用文档。有兴趣的朋友可以看看。