App.js

import CreatePopBox from "./popbox";
import createGuestPage from "./guestPage";
import {BrowserRouter , Route} from "react-router-dom";
import {Routes} from "react-router"


function App() {
  return (
      <>
          <BrowserRouter>
              <Routes>
                  <Route path='/' >
                      <CreatePopBox/>
                  </Route>
                  <Route path='/guestPage'>
                      <createGuestPage/>
                  </Route>
              </Routes>

          </BrowserRouter>


      </>
  )
}

export default App;

guestPage.js

import React from "react";

export default function createGuestPage(){
    return(
        <div>
            <h1>GuestPage</h1>
        </div>
    );
}

popBox.js

import "./popbox.css";
import React, {useState} from "react";
import Modal from "./Modal";
import {Button} from "@mui/material";

export default function CreatePopBox(){

    const [isOpen, setIsOpen] = useState(false);


    return(
       <div className= "popBox">
           <Button variant="contained" color="success" size ="large" onClick=
               {()=>{setIsOpen(true)}}>
             Continued as Guest
           </Button>
           {isOpen && <Modal onClose={setIsOpen}/>}
       </div>

    );



}

modal.js

import React from 'react';
import "./Modal.css";
import {Button} from "@mui/material";
import {useNavigate} from "react-router";




export default function Modal({onClose}){
    const navigate = useNavigate();
    const handleFormSubmit = (event)=>{
        event.preventDefault();

        navigate("/guestPage");

    };
    return (
        <form className="Guest" onSubmit={handleFormSubmit}>
            <h1>Go to NextPage</h1>
            
                <Button variant="contained"  size ="large" id="cancel"
                        onClick={()=>onClose(false)}>Cancel
                </Button>

                <Button variant="contained"  size ="large" type="submit"
                >Continue
                </Button>
            
        </form>
    )
}

我创建了一个表单，其中有一个按钮“continue”，可以在模态框内重定向到 guestPage.js。但是当我使用钩子 useNaviage、BrowserRouter、Route 和 Routes 时，我得到了一个空白网页。我确信我的其他代码中没有错误，但我认为我没有错误地使用 useNaviage、BrowserRouter、Route 和 Routes。我这里漏掉了什么吗？