0

I am trying to redirect to another page after the onSubmit and setRoom variables are received from the user's input. However, once I press submit the page reloads and a question mark appears next to the URL that was previously there without changing the page. I've included examples below.

import { useContext, useState } from "react";
import { Link, useNavigate } from "react-router-dom";
import { UserAuth } from "../context/AuthContext";
import spacesLogo from "../img/SpacesLogo.png";
import { RoomContext } from "../context/RoomContext";

const JoinRoom = () => {
   const [room, setRoom] = useState("");
   const onSubmit = useContext(RoomContext);
   const navigate = useNavigate();

   const handleSubmit = async (e) => {
      e.preventDefault(); // prevents page reload
      if (room !== "") {
         // socket.emit("join_room", room);
         setRoom(e.target.value);
         onSubmit(e.target.value);
         navigate("/live_chat");
      }
   };

URLs: before: http://localhost:3000/join_room

after: http://localhost:3000/join_room?

expected: //localhost:3000/live_chat

Here is how I've written the routes:

<RoomContext.Provider value={{ room, setRoom }}>
            <Routes>
               <Route path="/" element={<Login />} />
               <Route path="/signup" element={<Signup />} />
               <Route path="/join_room" element={<JoinRoom />} />
               <Route
                  path="/live_chat"
                  element={
                     <ProtectedRoute>
                        <LiveChat />
                     </ProtectedRoute>
                  }
               />
            </Routes>
         </RoomContext.Provider>

There are no errors so I am not sure on how to solve this.

Marquis4484
  • 123
  • 2
  • 9
  • 1
    could you please attach the code in which all your routes are written? – Asma Mar 24 '23 at 16:57
  • This link may answer your question : [link](https://stackoverflow.com/questions/43351752/react-router-changes-url-but-not-view?rq=2) – Asma Mar 24 '23 at 17:01
  • Yes Asma, I've updated the post. – Marquis4484 Mar 24 '23 at 17:39
  • You have created your protected route based on token or Id? If the check on your protected route doesn't works well, you wouldn't be able to move to the LiveChat component. Make sure your checks on the protected route works well. – Asma Mar 24 '23 at 17:41
  • What does the `onSubmit` do ? And what does the `ProtectedRoute` do ? Perhaps one of those is doing the redirection – Gabriele Petrioli Mar 24 '23 at 21:52

0 Answers0