【发布时间】：2022-10-04 16:13:28
【问题描述】：
我希望在管理员单击登录按钮后将登录页面导航到主页。但是，在我使用管理员帐户登录后，它仍然在登录页面上。
我在登录页面中使用 useNavigate 钩子，并期望流程会像：单击登录按钮 -> handleClick 功能 -> App.js 中的管理值更改为 true -> 导航到主页。
但是，即使在 Redux 开发人员工具上调用 loginSuccess 并且 App.js 中的 admin 值仍然为 false 时，页面也不会导航，除非我刷新登录页面。刷新登录页面后，可以导航到主页。
任何人都可以请帮助我吗？我希望在管理员单击登录按钮后导航主页，而不是单击登录按钮并刷新登录页面以导航到主页。我已经尝试解决了几天，但仍然无法解决这个问题。
应用程序.js
function App() {
//admin state is to deny non-admin access
const [admin, setAdmin] = useState(false);
useEffect(() => {
localStorage.getItem(\"persist:root\") &&
JSON.parse(JSON.parse(localStorage.getItem(\"persist:root\")).login)
.currentUser &&
setAdmin(
JSON.parse(JSON.parse(localStorage.getItem(\"persist:root\")).login)
.currentUser.isAdmin
);
});
return (
<Router>
{admin && <Topbar />}
<div className=\"container\">
{admin && <Sidebar />}
<Routes>
<Route
exact
path=\"/\"
element={admin ? <Home /> : <Navigate to=\"/login\" />}
/>
//shows login page as the first page
<Route
path=\"/login\"
element={!admin ? <Login /> : <Navigate to=\"/\" />}
/>
{admin && (
<>
<Route path=\"/users\" element={<UserList />} />
<Route path=\"/user/:userId\" element={<User />} />
<Route path=\"/newUser\" element={<NewUser />} />
<Route path=\"/products\" element={<ProductList />} />
<Route path=\"/product/:productId\" element={<Product />} />
<Route path=\"/newproduct\" element={<NewProduct />} />
</>
)}
</Routes>
</div>
</Router>
);
登录.jsx
const handleClick = (e) => {
e.preventDefault();
login(dispatch, { username, password });
navigate(\"/\");
};
apiCalls.js
export const login = async (dispatch, user) => {
dispatch(loginStart());
try {
const res = await publicRequest.post(\"/auth/login\", user);
dispatch(loginSuccess(res.data));
} catch (err) {
dispatch(loginFailure());
}
};
-
请将您的整个代码添加到代码框并附上链接。像这样的代码更难调试，需要查看整个代码来解决问题。我们无法通过仅查看某些组件而不查看其他组件来找出问题。
-
@AravindKrishna 这是代码框链接：codesandbox.io/s/pensive-germain-xzq5g5?file=/src/Login.jsx。请检查。
标签： javascript reactjs redux-toolkit