如何在 React 中导航后删除模态 div 元素？

Question

import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
import axios from "axios";
import Cookies from "js-cookie";

const LoginPage = () => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [errors, setErrors] = useState({});
  const navigate = useNavigate();

  const handleSubmit = async (event) => {
    event.preventDefault();
    try {
      const url = "http://localhost:8000/api/login";
      const response = await axios.post(url, {
        email: email,
        password: password,
      });
      console.log(response.data);
      Cookies.set("token", response.data.token);
      navigate("/home");
    } catch (error) {
      if (error.response && error.response.status === 401) {
        setErrors(error.response.data.errors);
      }
    }
  };

  const handleInputClick = () => {
    setErrors({});
  };

  return (
    <div
      className="modal fade"
      id="loginModal"
      aria-labelledby="loginModalLabel"
      aria-hidden="true"
    >
      <div className="modal-dialog modal-dialog-centered modal-fullscreen-md-down">
        <div className="modal-content">
          <div className="modal-header">
            <h5 className="modal-title" id="loginModalLabel">
              Авторизация
            </h5>
            <button
              type="button"
              class="btn-close"
              data-bs-dismiss="modal"
              aria-label="Close"
            ></button>
          </div>
          <div className="modal-body">
            <form onSubmit={handleSubmit}>
              <div className="form-group mb-3 text-start">
                <label className="mb-1">Email</label>
                <input
                  type="email"
                  onChange={(e) => setEmail(e.target.value)}
                  onClick={handleInputClick}
                  value={email}
                  className={`form-control ${errors.email ? "is-invalid" : ""}`}
                  placeholder="Введите ваш адрес электронной почты"
                />
                {errors.email && (
                  <div className="invalid-feedback">{errors.email[0]}</div>
                )}
              </div>
              <div className="form-group mb-3 text-start">
                <label className="mb-1">Пароль</label>
                <input
                  type="password"
                  onChange={(e) => setPassword(e.target.value)}
                  onClick={handleInputClick}
                  value={password}
                  className={`form-control ${errors.email ? "is-invalid" : ""}`}
                  placeholder="Введите ваш пароль"
                />
                {errors.email && (
                  <div className="invalid-feedback">{errors.email[0]}</div>
                )}
              </div>
              <div className="container-fluid p-0 d-flex flex-row align-items-center mb-3">
                <div className="form-check text-start me-auto">
                  <input type="checkbox" className="form-check-input"></input>
                  <label className="form-check-label">Запомнить меня</label>
                </div>
                <p className="m-0">
                  <a class="link-opacity-75-hover" href="#">
                    Забыли пароль?
                  </a>
                </p>
              </div>
              <button type="submit" className="btn btn-primary d-flex ms-auto">
                Войти
              </button>
            </form>
          </div>
        </div>
      </div>
    </div>
  );
};

export default LoginPage;

我有一个 React 组件 LoginPage，当用户单击其他页面上的按钮时，会弹出模式窗口。问题是，成功登录后，用户导航到 /home 页面，并且全屏上有一个 div 元素

<div class="modal-backdrop fade show"></div>

。 我需要删除这个元素。我怎样才能做到这一点？

我是 React 新手，并通过询问 ChatGPT 尝试了不同的方法来解决此问题

Answer 1

loginPage 组件是否存在于每个页面上？ 如果它不用于注销用户，您可以在渲染组件之前检查令牌是否存在。

类似的东西

{!checkToken() && (
   <LoginPage />
)}

但是在不了解项目结构的情况下很难给你具体的答案。