#React-Router-DOM : navigate() change URL but not view

1 messages · Page 1 of 1 (latest)

floral granite
#

HI all,

Here is my router :

const Router = () => {

  const {user} = useAuth()

  const router = createBrowserRouter(
    createRoutesFromElements(
      <Route path="/" element={<RootLayout />} errorElement={<ErrorPage />}>
        <Route index element={<HomePage />} />
        <Route path=":uuid" element={<GameboardPage />} />
        <Route path="/login" element={<AuthLayout />}>
          <Route index element={<LoginPage />} />
        </Route>
      </Route>
    )
  );

  return <RouterProvider router={router} />;
};

export default Router;

But when in my LoginForm component (in my LoginPage) I use :

const navigate = useNavigate()

useEffect(() => {
  setTimeout(() => {
    navigate("/")
  }, 2000)
}, [])

After 2 seconds, the URl change but the view stay the same, im not on my HomePage (and if I reload the page with the new "/" url, i go to my home page as expected with no errors, got only a problem with navigate)
Do you know what im i doing wrong ?

Thanks

clever spade
#

This is likely because you are creating your router in your <Router> component. This won't work since you end up with a brand new router created on every render so you lose any state of what the prior router did/was doing (such as navigating)

floral granite
# clever spade This is likely because you are creating your `router` in your `<Router>` compone...

Hum ok, i see, but the problem was, i want to redirect user from home page to login if not logged, andi need to use my useAuth custom hook, so it's why i put it inside :

import { Navigate, Route, RouterProvider, createBrowserRouter, createRoutesFromElements } from "react-router-dom";
import HomePage from "./pages/HomePage";
import ErrorPage from "./pages/ErrorPage";
import LoginPage from "./pages/LoginPage";
import RootLayout from "./layouts/RootLayout";
import AuthLayout from "./layouts/AuthLayout";
import useAuth from "./hooks/useAuth";
import GameboardPage from "./pages/GameboardPage";

const Router = () => {

  const {user} = useAuth()

  const router = createBrowserRouter(
    createRoutesFromElements(
      <Route path="/" element={<RootLayout />} errorElement={<ErrorPage />}>
        <Route index element={user ? <HomePage /> : <Navigate to="/login" />} />
        <Route path=":uuid" element={<GameboardPage />} />
        <Route path="/login" element={<AuthLayout />}>
          <Route index element={<LoginPage />} />
        </Route>
      </Route>
    )
  );

  return <RouterProvider router={router} />;
};

export default Router;