用户登录后不会被重定向

Question

登录成功后，它停留在登录页面上，用户的信息仍然在输入中，因为我希望它重定向到以前的位置或主页。我不知道如果我使用useSearchParams正确的方式，如果我应该包括他们在useEffect。登录成功后，它停留在登录页面上，用户的信息仍在输入中，因为我希望它重定向到以前的位置或主页。我不知道我是否以正确的方式使用了useSearchParams，也不知道我是否应该将它们包含在useEffect"& lt;只是为了张贴问题

LoginScreen.js:

import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux";
import { Row, Col, Button, Form } from "react-bootstrap";
//import products from "../../products";
import Message from "../Message";
import Loader from "../Loader";
import { useNavigate, useLocation, useSearchParams } from "react-router-dom";
import { login } from "../../actions/UserActions";
import LoginForm from "../LoginForm";
function LoginScreen() {
const [searchParams, setSearchParams] = useSearchParams();
const { search } = useLocation();
const navigate = useNavigate();
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const dispatch = useDispatch();
const redirect = searchParams.get(search.split("=")) || 1;
const userLogin = useSelector((state) => state.userLogin);
const { error, loading, userInfo } = userLogin;
useEffect(() => {
if (userInfo) {
navigate(redirect);
//searchParams.delete("userInfo");
setSearchParams(searchParams);
}
}, [navigate, userInfo, redirect, searchParams, setSearchParams]);
const submitHandler = (e) => {
e.preventDefault();
dispatch(login(email, password));
};

App.js:

<Container>
<Routes>
<Route path="/" element={<HomeScreen />} />
<Route path="/login" element={<LoginScreen />} />
<Route path="/register" element={<RegisterScreen />} />
<Route path="/product/:id" element={<ProductScreen />} />
<Route path="/cart">
<Route path=":productid" element={<CartScreen />} />
<Route index element={<CartScreen />} />
</Route>
</Routes>
</Container>

package.json:

{
"name": "efrontend",
"proxy": "http://127.0.0.1:8000/",
"version": "0.1.0",
"private": true,
"dependencies": {
"@reduxjs/toolkit": "^1.9.0",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"axios": "^1.1.3",
"bootstrap": "^5.2.2",
"react": "^18.2.0",
"react-bootstrap": "^2.6.0",
"react-dom": "^18.2.0",
"react-redux": "^8.0.5",
"react-router-bootstrap": "^0.26.2",
"react-router-dom": "^6.4.3",
"react-scripts": "5.0.1",
"redux-devtools-extension": "^2.13.9",
"redux-thunk": "^2.4.2",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@types/bootstrap": "^5.2.6",
"@types/react-bootstrap": "^0.32.31"
}
}

Answer 1

我可以看到你正在使用react router，所以你可以使用useHistoryhook来处理这种情况，如下所示:

const navigate = useNavigate(); // import { useNavigate } from "react-router-dom";
const submitHandler = (e) => {
e.preventDefault();
dispatch(login(email, password));
navigate('/your-route'); // redirects to /your-route
};

Answer 2

我认为您滥用了useSearchParams钩子，或者更确切地说，访问特定的queryString参数。searchParams是一个URLSearchParams对象，所以你应该通过键来获取queryString参数。

的例子:

const [searchParams, setSearchParams] = useSearchParams();
...
useEffect(() => {
if (userInfo) {
const redirect = searchParams.get("redirect");
navigate(redirect || "/"); // <-- fallback to some defined page route
}
}, [navigate, userInfo, searchParams]);