REACT: Location.搜索重定向到应用程序的错误页面

Question

我正在构建一个电子商务反应应用程序，目前我卡住了重定向到主页一旦用户登录。我使用位置来搜索URL并拆分它，并将其右侧部分转到登录页面，否则如果用户登录，则应重定向到主页。

但问题是，即使没有用户登录，应用程序也会直接重定向到主页。登录页面被跳过，永远不显示。

下面是我的loginPage代码。

import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import { Form, Button, Row, Col } from "react-bootstrap";
import { useDispatch, useSelector } from "react-redux";
import Message from "../components/Message";
import Loader from "../components/Loader";
import FormContainer from "../components/FormContainer";
import { login } from "../actions/userActions";
const LoginScreen = ({ location, history }) => {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const dispatch = useDispatch();
const userLogin = useSelector((state) => state.userLogin);
const { loading, error, userInfo } = userLogin;
const redirect = location.search
? location.search.split("=")[1]
: "/";
useEffect(() => {
if (userInfo) {
history.push(redirect);
}
}, [history, userInfo, redirect]);
const submitHandler = (e) => {
e.preventDefault();
dispatch(login(email, password));
};
return (
<FormContainer>
<h1>Sign In</h1>
{error && <Message variant='danger'>{error}</Message>}
{loading && <Loader />}
<Form onSubmit={submitHandler}>
<Form.Group controlId='email'>
<Form.Label>Email Address</Form.Label>
<Form.Control
type='email'
placeholder='Enter email'
value={email}
onChange={(e) => setEmail(e.target.value)}
></Form.Control>
</Form.Group>
<Form.Group controlId='password'>
<Form.Label>Password</Form.Label>
<Form.Control
type='password'
placeholder='Enter password'
value={password}
onChange={(e) => setPassword(e.target.value)}
></Form.Control>
</Form.Group>
<Button type='submit' variant='primary'>
Sign In
</Button>
</Form>
<Row className='py-3'>
<Col>
New Customer?{" "}
<Link to={redirect ? `/register?redirect=${redirect}` : "/register"}>
Register
</Link>
</Col>
</Row>
</FormContainer>
);
};
export default LoginScreen;

And this is my App.js code.

import React from "react";
import { Container } from "react-bootstrap";
import { BrowserRouter as Router, Route } from "react-router-dom";
import Header from "./components/Header";
import Footer from "./components/Footer";
import HomeScreen from "./screens/HomeScreen";
import ProductScreen from "./screens/ProductScreen";
import CartScreen from "./screens/CartScreen";
import LoginScreen from "./screens/LoginScreen";
const App = () => {
return (
<Router>
<Header />
<main>
<Container>
<Route path='/login' component={LoginScreen} />
<Route path='/product/:id' component={ProductScreen} />
<Route path='/cart/:id?' component={CartScreen} />
<Route path='/' component={HomeScreen} exact />
</Container>
</main>
<Footer />
</Router>
);
};
export default App;

登录页面永远不会显示…

Answer 1

我终于明白了。当我将用户设置为本地存储时，它在reducer存储中。而不是使用null我用的是[]react创建了自己的用户

const userInfoFromStorage = localStorage.getItem('userInfo')
? JSON.parse(localStorage.getItem('userInfo'))
: [];

所以我把它改成null，一切都正常了

const userInfoFromStorage = localStorage.getItem('userInfo')
? JSON.parse(localStorage.getItem('userInfo'))
: null;