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>