useNavigate gives me blank webpage-CodePudding

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>
    )
}

I create a form with a button "continue" that can redirect to guestPage.js inside the modal box. But when I use the hook useNaviage, BrowserRouter, Route, and Routes, I get a blank webpage. I am sure there is no bug in my other code, but I don't think I use useNaviage, BrowserRouter, Route, and Routes incorrectly. Do I miss anything here?

CodePudding user response：

The route content should be rendered on the Route component's element prop. The only valid children of the Route component are other Route components in the case of nesting routes.

Move the routed content to the element prop.

Example:

<BrowserRouter>
  <Routes>
    <Route path='/' element={<CreatePopBox />} />
    <Route path='/guestPage' element={<CreateGuestPage />} />
  </Routes>
</BrowserRouter>

CodePudding user response：

In addition to the other answer, make sure you import useNavigate hook and other react-router components from react-router-dom.

Note that you are importing Routes from react-router in your App component, same thing happens on your modal.js component with useNavigate.