From 249d0a5503816990c8ca7cd1ceb40a77eca11512 Mon Sep 17 00:00:00 2001
From: HuaYu <15600557119@163.com>
Date: Sat, 14 Jan 2023 15:39:33 +0800
Subject: [PATCH] =?UTF-8?q?=E9=AB=98=E9=98=B6=E7=BB=84=E4=BB=B6=E5=8C=85?=
 =?UTF-8?q?=E8=A3=B9,=E7=BB=84=E4=BB=B6=E8=B7=B3=E8=BD=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/WidthUseNavigate/index.js | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)
 create mode 100644 src/pages/WidthUseNavigate/index.js

diff --git a/src/pages/WidthUseNavigate/index.js b/src/pages/WidthUseNavigate/index.js
new file mode 100644
index 0000000..33d3b10
--- /dev/null
+++ b/src/pages/WidthUseNavigate/index.js
@@ -0,0 +1,20 @@
+import { useNavigate } from 'react-router-dom'
+// 高阶组件包装useNavigate()功能
+// 原因：类组件中无法使用useNavigate()，会报错
+// React Hook "useNavigate" cannot be called in a class component.
+function WidthUseNavigate(WrapCompontent) {
+  // 设置别名
+  WrapCompontent.displayName = `widthUseNavigate${getDisplayName(WrapCompontent)}`
+  return function NavigateCompont() {
+    const navigate = useNavigate()
+    // 给传入的组件新增一个to方法，传给原始组件的props，在原始组件中通过this.props.to(参数)使用
+    return <WrapCompontent to={navigate}></WrapCompontent>
+  }
+}
+ 
+// 别名
+function getDisplayName(WrapCompontent) {
+  return WrapCompontent.displayname || WrapCompontent.name || 'Component'
+}
+ 
+export default WidthUseNavigate
\ No newline at end of file