fixed navigation links

src/layout/pages/MainLobby.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import useTitle from "../../utils/hooks/TitleHook";
 import Card from "../components/Card";
+import {useNavigate} from "react-router";
 
 const ROOM_URL = `http://${process.env.REACT_APP_API_URL}/room`;
 
@@ -8,18 +9,16 @@ const MainLobby = () => {
 
     useTitle('Mau-Mau Lobby');
 
+    const navigateTo = useNavigate();
+
     const handleCreateRoom = () => {
         fetch(ROOM_URL, {
             method: 'POST',
         }).then(r => r.json()).then(data => {
-            window.location.href = `/room/${data}`;
+            navigateTo(`/room/${data}`)
         });
     }
 
-    const gotoRooms = () => {
-        window.location.host = '/rooms';
-    }
-
     return (
         <div className={"main-lobby"}>
             <h1 className={"main-lobby__title mau"}>Mau-Mau</h1>
@@ -28,7 +27,7 @@ const MainLobby = () => {
                     <h2 className={"mau"}>Host Game</h2>
                     <Card cardString={'SPADES ACE'} isClickable/>
                 </div>
-                <div className={"main-lobby__container-button clickable"} onClick={gotoRooms}>
+                <div className={"main-lobby__container-button clickable"} onClick={() => navigateTo('/rooms')}>
                     <h2 className={"mau"}>Join Game</h2>
                     <Card cardString={'SPADES ACE'} isHidden isClickable/>
                 </div>

src/layout/pages/Room.tsx

@@ -1,6 +1,6 @@
 import useWebSocket from "react-use-websocket";
 import React from "react";
-import {useParams} from "react-router";
+import {useNavigate, useParams} from "react-router";
 import {GHButton} from "../components/Button";
 import useTitle from "../../utils/hooks/TitleHook";
 import Hand from "../components/Hand";
@@ -18,6 +18,8 @@ const Room = () => {
 
     useTitle('Mau!');
 
+    const navigateTo = useNavigate();
+
     const {roomId} = useParams();
 
     const WS_URL = `ws://${process.env.REACT_APP_API_URL}/room/${roomId}`;
@@ -43,7 +45,7 @@ const Room = () => {
     const handleLeaveRoom = () => {
         const socket = websocket.getWebSocket();
         if (socket) socket.close();
-        window.location.href = '/';
+        navigateTo('/');
     }
 
     const handleCardSend = (card: string) => {

src/layout/pages/Rooms.tsx

@@ -1,11 +1,13 @@
 import useTitle from "../../utils/hooks/TitleHook";
 import React from "react";
+import {useNavigate} from "react-router";
 
 const ROOM_URL = `http://${process.env.REACT_APP_API_URL}/room`;
 
 const Rooms = () => {
 
     useTitle('Mau-Mau Rooms');
+    const navigateTo = useNavigate();
 
     const [rooms, setRooms] = React.useState<string[]>([]);
 
@@ -15,10 +17,6 @@ const Rooms = () => {
             .then(data => setRooms(data));
     }, []);
 
-    const gotoRoom = (room: string) => {
-        window.location.host = `/room/${room}`;
-    }
-
     return (
         <div>
             <h1>Rooms</h1>
@@ -26,7 +24,7 @@ const Rooms = () => {
                 {
                     rooms.map((room, index) => {
                         return <li key={index} className={"clickable"}
-                                   onClick={() => gotoRoom(room)}>{room}</li>
+                                   onClick={() => navigateTo(`/room/${room}`)}>{room}</li>
                     })
                 }
             </ul>