From f33bc583eac7dab285013f244828dd865af9a21b Mon Sep 17 00:00:00 2001
From: qtchaos <72168435+qtchaos@users.noreply.github.com>
Date: Sun, 3 Mar 2024 22:47:51 +0200
Subject: [PATCH] fix: when navigating to own pages, use `useNavigate()`

---
 src/components/buttons/Button.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/buttons/Button.tsx b/src/components/buttons/Button.tsx
index f5c81b8d..8502e506 100644
--- a/src/components/buttons/Button.tsx
+++ b/src/components/buttons/Button.tsx
@@ -1,5 +1,6 @@
 import classNames from "classnames";
 import { ReactNode, useCallback } from "react";
+import { useNavigate } from "react-router-dom";
 
 import { Icon, Icons } from "@/components/Icon";
 import { Spinner } from "@/components/layout/Spinner";
@@ -20,6 +21,7 @@ interface Props {
 }
 
 export function Button(props: Props) {
+  const navigate = useNavigate();
   const { onClick, href, loading } = props;
   const cb = useCallback(
     (
@@ -31,10 +33,14 @@ export function Button(props: Props) {
       if (loading) return;
       if (href && !onClick) {
         event.preventDefault();
-        window.open(href, "_blank", "noreferrer");
+        if (!href.includes("http")) {
+          navigate(href);
+        } else {
+          window.open(href, "_blank", "noreferrer");
+        }
       } else onClick?.(event);
     },
-    [onClick, href, loading],
+    [loading, href, onClick, navigate],
   );
 
   let colorClasses = "bg-white hover:bg-gray-200 text-black";