https://github.com/zjunbin1286/react-router-keepalive

🔥 基于 React Router 实现的 KeepAlive 缓存组件（KeepAlive caching component based on React Router implementation）
https://github.com/zjunbin1286/react-router-keepalive

keepalive react-router reactjs typescript

Last synced: 29 days ago
JSON representation

🔥 基于 React Router 实现的 KeepAlive 缓存组件（KeepAlive caching component based on React Router implementation）

• Host: GitHub
• URL: https://github.com/zjunbin1286/react-router-keepalive
• Owner: zjunbin1286
• License: mit
• Created: 2024-04-07T06:51:36.000Z (9 months ago)
• Default Branch: main
• Last Pushed: 2024-08-17T14:50:24.000Z (5 months ago)
• Last Synced: 2024-08-17T15:59:06.665Z (5 months ago)
• Topics: keepalive, react-router, reactjs, typescript
• Language: TypeScript
• Homepage:
• Size: 68.4 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-router-keepalive

🔥 基于 React Router 实现的 KeepAlive 缓存组件（KeepAlive caching component based on React Router implementation）

## 1. 场景

路由切换会销毁对应的组件，但很多场景我们希望路由切换组件不销毁，也就是 keepalive。

## 2. 实现

我们在 context 中保存所有需要 keepalive 的组件，然后渲染的时候全部渲染出来，通过路由是否匹配来切换显示隐藏。以实现 keepalive 的效果

该功能是依赖 React Router 的 `useLocation`、`useOutlet`、`matchPath` 等 api 实现

**核心原理：在 context 中保存所有需要 keepalive 的组件，全部渲染出来，通过路由是否匹配来切换对应组件的显示隐藏。**

## 3. 使用

在 `App.tsx` 中最外层包裹 `KeepAlive` 组件，并通过 keepPaths 属性传入想要缓存的组件地址

```tsx

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

import { router } from './router'

import KeepAlive from './keepalive'

function App() {

  return (

    

      

    

  )

}

export default App

```

keepPaths 属性类型为数组，支持正则和字符串

上面表示缓存 `/article` 和 `/` 对应的组件数据 

然后在 `Layout` 组件中，使用 `useKeepOutlet` 返回的元素作为路由组件渲染出来

```tsx

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

import {useKeepOutlet} from '../keepalive'

export default function Layout() {

  const { pathname } = useLocation()

  const element = useKeepOutlet()

  return (

    


      
当前路由: {pathname}

      {element}

    

  )

}

```


该示例路由配置如下

```tsx

const routes = [

  {

    path: '/',

    element: ,

    children: [

      {

        path: '/',

        element: ,

      },

      {

        path: '/article',

        element: ,

      },

      {

        path: '/about',

        element: ,

      },

    ],

  },

]

```