From ed96c4ece4217948facb13961cc88aeaa942372d Mon Sep 17 00:00:00 2001
From: EYHN <cneyhn@gmail.com>
Date: Wed, 17 Apr 2024 16:43:29 +0800
Subject: [PATCH] fix(core): fix navigate not working (#6594)

navigate sometimes doesn't work

It seems that we shouldn't pass the parent component's navigate function to the child component, but adding an effect to delay the child component rendering seems to work.
---
 packages/frontend/core/src/router.tsx | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/packages/frontend/core/src/router.tsx b/packages/frontend/core/src/router.tsx
index c39197a2f3..d362881f33 100644
--- a/packages/frontend/core/src/router.tsx
+++ b/packages/frontend/core/src/router.tsx
@@ -1,5 +1,5 @@
 import { wrapCreateBrowserRouter } from '@sentry/react';
-import { createContext, useEffect } from 'react';
+import { createContext, useEffect, useState } from 'react';
 import type { NavigateFunction, RouteObject } from 'react-router-dom';
 import {
   createBrowserRouter as reactRouterCreateBrowserRouter,
@@ -16,6 +16,12 @@ export const NavigateContext = createContext<NavigateFunction | null>(null);
 function RootRouter() {
   const location = useLocation();
   const navigate = useNavigate();
+  const [ready, setReady] = useState(false);
+  useEffect(() => {
+    // a hack to make sure router is ready
+    setReady(true);
+  }, []);
+
   useEffect(() => {
     mixpanel.track_pageview({
       page: location.pathname,
@@ -26,9 +32,11 @@ function RootRouter() {
     });
   }, [location]);
   return (
-    <NavigateContext.Provider value={navigate}>
-      <Outlet />
-    </NavigateContext.Provider>
+    ready && (
+      <NavigateContext.Provider value={navigate}>
+        <Outlet />
+      </NavigateContext.Provider>
+    )
   );
 }