[Bug]: `Navigate` causes an infinite loop if it remains mounted after navigation

As a workaround we’ve implemented the fix in https://github.com/remix-run/react-router/pull/8734 as a standalone component. You should be able to replace the built-in Navigate component with something like the below, or just use useNavigate directly in your components until then.

import type { NavigateProps } from 'react-router-dom';
import { useNavigate } from 'react-router-dom';

export const Navigate: React.FC<NavigateProps> = ({ to, replace, state }) => {
  const navigate = useNavigate();
  const navigateRef = useRef(navigate);

  useEffect(() => {
    navigateRef.current = navigate;
  }, [navigate]);

  useEffect(() => {
    navigateRef.current(to, { replace, state });
  }, [to, replace, state]);

  return null;
};

How do u get this working with createBrowserRouter ? its causing infinite loop. Tried solution by @jordan-burnett , but then it fixes inifinte loop but nothing is rendering on page, just shows a blank page

const getRoutes = (isUserLoggedIn : boolean) => {
  console.log('isUserLoggedIn',isUserLoggedIn);
  const router = createBrowserRouter([
    {
      path: '/',
      element: isUserLoggedIn ? <Navigate to="/dashboard" replace={true} /> : <LoginPage/>,
      children: [
        {
          path: '/dashboard',
          element: (
            <DashboardPage/>
          ),
        },
      ],
    },
  ]);
  return router;
};

 <RouterProvider router={getRoutes(isUserLoggedIn)} />