how to redirect to homepage after login in reactjs using SPA

Question

my problem: after clicking login, my page doesn't redirect to home page but still stays on login page, even though check in Application I have successfully logged in, I have to F5 to get everything back to normal after login. how to click login can redirect to home page when using SPA in reactjs

Thank you

func submit

onSubmit: async () => {
      const loginData = await loginUser(values);
      console.log(loginData);
      if (loginData.success) {
        navigate('/dashboard/app', { replace: true });
      } else console.log(values);
    }

Router:

import { useContext } from 'react';
import { Navigate, useRoutes } from 'react-router-dom';
// layouts
import DashboardLayout from './layouts/dashboard';
import LogoOnlyLayout from './layouts/LogoOnlyLayout';
//
import Login from './pages/Login';
import Register from './pages/Register';
import DashboardApp from './pages/DashboardApp';
import Products from './pages/Products';
import Blog from './pages/Blog';
import User from './pages/User';
import NotFound from './pages/Page404';
//
import { AuthContext } from './contexts/AuthContext';
// ----------------------------------------------------------------------

export default function Router() {
  const {
    authState: { authLoading, isAuthenticated }
  } = useContext(AuthContext);
  let body;
  if (authLoading) {
    body = 0;
  } else if (isAuthenticated) {
    body = 1;
  } else {
    body = 2;
  }
  return useRoutes([
    {
      path: '/dashboard',
      element: <DashboardLayout />,
      children: [
        {
          element: body === 1 ? <Navigate to="/dashboard/app" replace /> : <Navigate to="/login" />
        },
        { path: 'app', element: body === 1 ? <DashboardApp /> : <Navigate to="/login" /> },
        { path: 'user', element: body === 1 ? <User /> : <Navigate to="/login" /> },
        { path: 'products', element: body === 1 ? <Products /> : <Navigate to="/login" /> },
        { path: 'blog', element: body === 1 ? <Blog /> : <Navigate to="/login" /> }
      ]
    },
    {
      path: '/',
      element: <LogoOnlyLayout />,
      children: [
        {
          path: 'login',
          element: body === 1 ? <Navigate to="/dashboard" /> : <Login />
        },
        { path: 'register', element: body === 1 ? <Navigate to="/dashboard" /> : <Register /> },
        { path: '404', element: <NotFound /> },
        {
          path: '/',
          element: body === 1 ? <Navigate to="/dashboard" /> : <Navigate to="/login" />
        },
        { path: '*', element: <Navigate to="/404" /> }
      ]
    },
    { path: '*', element: <Navigate to="/404" replace /> }
  ]);
}

Basic debugging: what's the output of `console.log(loginData);`? is `loginData.success` truthy? Does the navigate() line get called? Also, if this is a form you're submitting, are you calling .preventDefault(); on the submission event? — , Jan 12 '22 at 09:52
I don't call preventDefault(); because I use Formik. After I click login, isAuthenticated doesn't change to true right away, I need to press F5 — Nguyen Huu Thang, Jan 12 '22 at 10:01

foakesm · Answer 1 · 2022-01-12T10:07:58.283

1

I don't think Navigate exists within react-router-dom. Are you thinking of Redirect?

https://v5.reactrouter.com/web/api/Redirect

EDIT: Wait my bad, it is in V6 -> https://reactrouter.com/docs/en/v6/api#navigate

edited Jan 12 '22 at 10:07

answered Jan 12 '22 at 10:01

foakesm

803
10
18

https://stackoverflow.com/questions/63690695/react-redirect-is-not-exported-from-react-router-dom – Nguyen Huu Thang Jan 12 '22 at 10:08
Redirect component has been removed from the react-router V6. – Nguyen Huu Thang Jan 12 '22 at 10:09

score 0 · Answer 2 · answered Jan 13 '22 at 14:51

When you want to redirect to another Route:

import { useHistory } from "react-router-dom";

const Login = () => {

let history = useHistory(); //add this line

   onSubmit: async () => {
     const loginData = await loginUser(values);
       console.log(loginData);
       if (loginData.success) {
         history.push('/dashboard/app'); //add this instead
       } else console.log(values);
     }
   }

how to redirect to homepage after login in reactjs using SPA

2 Answers2