反应：Location.Search 重定向到错误的应用页面

问题描述

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

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

下面是我的登录页面代码。

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;

这是我的 App.js 代码。

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;

登录页面永远不会显示..

解决方法

我终于解决了这个问题。当我将用户设置为本地存储时，它在减速器存储中。我没有使用 null，而是使用 [] 并且 React 正在创建自己的用户。

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

所以我只是将其更改为 null，一切正常。

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