From 1166c4f0759cf2366fcb28dd873f3895ed6c8c17 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=84=E6=98=8E=E5=AF=8C?= <212149997@qq.com>
Date: Fri, 1 Nov 2024 15:39:37 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96useRouter=E3=80=81rea?=
 =?UTF-8?q?dme=E6=96=87=E6=A1=A3=E5=86=85=E5=AE=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                     | 11 +++++++++++
 src/hooks/use-router/index.ts |  1 +
 2 files changed, 12 insertions(+)

diff --git a/README.md b/README.md
index e7f3f7b..77198d4 100644
--- a/README.md
+++ b/README.md
@@ -47,6 +47,17 @@ GitHub 项目地址：[React-Ts-Template](https://github.com/huangmingfu/react-t
 
 其中，**`lint:lint-staged` 相当于 `lint:all`**，实现对全部代码的质量检查和格式化。
 
+## 其他
+
+### 📦 关于路由缓存 keep-alive
+
+> React 官方暂时没有实现 vue \<keep-alive\> 类似的功能。React 官方出于两点考虑拒绝添加这个功能，具体可以自行搜索查阅。为了达到状态保存的效果，官方推荐以下两种手动保存状态的方式：
+
+- 将需要保存状态组件的 state 提升至父组件中保存。
+- 使用 CSS visible 属性来控制需要保存状态组件的渲染，而不是使用 if/else，以避免 React 将其卸载。
+
+> 不过也有一些相关库实现了这个功能，如：react-router-cache-route、react-activation、keepalive-for-react等等，如果项目中需要状态缓存处理的数据量较小，那最好还是按照 React 官方的建议，手动解决状态缓存问题。
+
 ---
 
 ## 总结
diff --git a/src/hooks/use-router/index.ts b/src/hooks/use-router/index.ts
index d998fb2..a2569c0 100644
--- a/src/hooks/use-router/index.ts
+++ b/src/hooks/use-router/index.ts
@@ -6,6 +6,7 @@ export function useRouter() {
 
   const router = useMemo(
     () => ({
+      go: (delta: number) => navigate(delta),
       back: () => navigate(-1),
       forward: () => navigate(1),
       reload: () => window.location.reload(),