如何在 React 中路由模态登录/注册表单？

Question

我正在开发我的文凭项目网站。主页上有一个按钮，可以弹出带有登录表单的模式窗口。此登录表单上还有一个按钮，可以使登录表单在同一模式窗口中切换到注册表单。我在路由登录模态窗口和注册模态窗口方面遇到了困难。

MainPage.js

import React, { useState } from "react";
import "../App.css";
import Footer from "../Components/Footer";
import Navbar from "../Components/Navbar";
import Button from "../Components/Button";
import ModalLogin from "../Components/ModalLogin";
import RegisterModal from "../Components/RegisterModal";

const MainPage = () => {
  const [isModalOpen, setModalOpen] = useState(false);
  const [isLoginForm, setLoginForm] = useState(true);

  function authorize() {
    setModalOpen(true);
    setLoginForm(true);
  }

  function closeModal() {
    setModalOpen(false);
  }

  function toggleForm() {
    setLoginForm((prev) => !prev);
  }

  return (
    <div className="app-container">
      <div className="main-container">
        <Navbar />
        <div className="intro-section-container">
          <h1>
            Цифровая
            <br />
            образовательная платформа
            <br />
            “Название не придумал”
          </h1>
          <p>
            Откройте дверь в мир музыки с нашим электронным дневником.
            <br />
            Присоединяйтесь прямо сейчас!
          </p>
          <div className="intro-buttons-container">
            <Button color="button-primary" label="Войти" onClick={authorize} />
            <Button color="button-outlined" label="Подключить школу" />
          </div>
        </div>
        {isModalOpen &&
          (isLoginForm ? (
            <ModalLogin onToggleForm={toggleForm} onClose={closeModal} />
          ) : (
            <RegisterModal onToggleForm={toggleForm} onClose={closeModal} />
          ))
        }
      </div>
      <Footer />
    </div>
  );
};

export default MainPage;

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import NoPage from './Pages/NoPage';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<App />} />
        <Route path="*" element={<NoPage />} />
      </Routes>
    </BrowserRouter>
  </React.StrictMode>
);

App.js

import "./App.css";
import MainPage from "./Pages/MainPage";

function App() {
  return (
    <MainPage />
  );
}

export default App;

我尝试了不同的方法来路由这些表单，但没有任何效果

Answer 1

我想路由它们，所以如果我打开登录模式，我需要我的地址 注册时如

"localhost:3000/login"

或

"localhost:3000/register"

模态窗口打开。

导入并使用

useNavigate

挂钩，在模式 UI 切换时向相应的

"/login"

和

"/register"

URL 路径发出命令式导航操作。使用依赖于状态变量的

useEffect

钩子来在状态更新时影响导航操作。

import { useNavigate } from 'react-router-dom';

const MainPage = () => {
  const navigate = useNavigate();

  const [isModalOpen, setModalOpen] = useState(false);
  const [isLoginForm, setLoginForm] = useState(true);

  useEffect(() => {
    if (isModalOpen) {
      // Modal is open, redirect to login or register path
      navigate(isLoginForm ? "/login" : "/register", { replace: true });
    } else {
      // Modal is closed, redirect back to home page path
      navigate("/", { replace: true });
    }
  }, [isModalOpen, isLoginForm]);

  function authorize() {
    setModalOpen(true);
    setLoginForm(true);
  }

  function closeModal() {
    setModalOpen(false);
  }

  function toggleForm() {
    setLoginForm((prev) => !prev);
  }

  return (
    ...
  );
};

您需要更新路由器才能渲染

MainPage

，例如

App

在所有这些路线上，以便 UI 保持安装和渲染状态。

示例：

<BrowserRouter>
  <Routes>
    <Route path="/" element={<App />} />
    <Route path="/login" element={<App />} />
    <Route path="/register" element={<App />} />

    <Route path="*" element={<NoPage />} />
  </Routes>
</BrowserRouter>