feat: routing done so far, no linking yet

frontend/src/App.tsx

 import { useState } from "react";
-import logo from "./logo.svg";
+import 'antd/dist/antd.css'
 import "./App.css";
 import MainPage from "./components/MainPage";
 import { Routes, Route, Outlet, Link, BrowserRouter } from "react-router-dom";
 import { NavigationBar } from "./components/NavigationBar";
 import { About } from "./components/About";
+import React from "react";
+import { Browse } from "./components/Browse";
+import { Search } from "./components/Search";
 
 function App() {
   return (
     <div className="app">
-      <NavigationBar />
-      <MainPage />
+      <NavigationBar/>
+      <BrowserRouter>
+        <Routes>
+          <Route path="/" element={<MainPage/>}></Route>
+          <Route path="/browse" element={<Browse/>}></Route>
+          <Route path="/search" element={<Search/>}></Route>
+          <Route path="/about" element={<About/>}></Route>
+        </Routes>
+      </BrowserRouter>
     </div>
   );
 }

frontend/src/components/NavigationBar.tsx

@@ -12,7 +12,7 @@ export const NavigationBar = () => {
         <Menu theme="dark" mode="horizontal" defaultSelectedKeys={["2"]}>
           <Image src={logo} width={50}></Image>
 
-          <Menu.Item><Link to= "/">Home</Link></Menu.Item>
+          <Menu.Item>Home</Menu.Item>
           <Menu.Item>Browse</Menu.Item>
           <Menu.Item>Search</Menu.Item>
           <Menu.Item>About</Menu.Item>