feat: routing finished

frontend/src/App.tsx

@@ -8,19 +8,22 @@ import { About } from "./components/About";
 import React from "react";
 import { Browse } from "./components/Browse";
 import { Search } from "./components/Search";
+import { ErrorPage } from "./components/ErrorPage";
 
 function App() {
   return (
     <div className="app">
+      
       <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>
+          <Route path="*" element={<ErrorPage/>}></Route>
         </Routes>
-      </BrowserRouter>
+      
     </div>
   );
 }

frontend/src/components/NavigationBar.tsx

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

frontend/src/main.tsx

 import React from 'react'
 import ReactDOM from 'react-dom/client'
+import { BrowserRouter } from 'react-router-dom'
 import App from './App'
 import './index.css'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
+    <BrowserRouter>
     <App />
+    </BrowserRouter>
   </React.StrictMode>
 )