[英]how to redirect to homepage after login in reactjs using SPA
我的問題:點擊登錄后,我的頁面沒有重定向到主頁但仍然停留在登錄頁面,即使簽入應用程序我已經成功登錄,我必須在登錄后按 F5 讓一切恢復正常。 在reactjs中使用SPA時如何點擊登錄可以重定向到主頁
謝謝
函數提交
onSubmit: async () => { const loginData = await loginUser(values); console.log(loginData); if (loginData.success) { navigate('/dashboard/app', { replace: true }); } else console.log(values); }
路由器:
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 /> } ]); }
當您想重定向到另一個路由時:
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);
}
}
我不認為導航存在於 react-router-dom 中。 你在考慮重定向嗎?
https://v5.reactrouter.com/web/api/Redirect
編輯:等一下,它在 V6 -> https://reactrouter.com/docs/en/v6/api#navigate
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.