react react-activation keep-alive 实现路由跳转返回保留组件状态

react react-activation keep-alive 实现路由跳转返回保留组件状态

react-activation官方文档

1.react-activation安装

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

2.在入口文件引入并使用 AliveScope 包裹

// index.js

import React from 'react'
import ReactDOM from 'react-dom'
import { AliveScope } from 'react-activation'

import App from './App'

ReactDOM.render(
  <AliveScope>
    <App />
  </AliveScope>,
  document.getElementById('root')
)

3.在路由文件中用KeepAlive 包裹需要保持状态的组件

// router.js
import KeepAlive from 'react-activation'

const routes = [
	{
		path: '/',
		redirect: '/login',
	},
	{
		path: '/list',
		element: <List/>,
		title: '列表页面'
	},
	{
		path: '/detail',
		// keepAlive 设置id, 默认会使用同一份缓存，实现多份需要增加id属性来区分
		element: <KeepAlive id="Detail"><Detail/></KeepAlive>,
		title: '详情页面'
	},
	{
		path: '/login',
		element: <Login/>,
		title: '登录页面'
	},
]

export default routes

4.注意事项

通过 KeepAlive 包括后，会新增dom，如对布局高度有影响，需要设置对应css高度

.ka-wrapper,
.ka-content {
  height: 100%;
}