navigate between pages with nav component

frontend/src/components/Navbar.tsx

@@ -1,8 +1,24 @@
+import { Button } from '@mui/material';
+import { Link } from 'react-router-dom';
+
 export default function Navbar() {
   return (
     <div className="flex-row">
-      <button />
-      <button />
+      <Button
+        variant="outlined"
+        component={Link}
+        to="/"
+      >
+        Home
+      </Button>
+      <Button
+        variant="outlined"
+        component={Link}
+        to="/article"
+      >
+        Article
+      </Button>
+
     </div>
   );
 };

frontend/src/main.tsx

@@ -8,11 +8,11 @@ import Navbar from './components/Navbar.tsx'
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <Navbar />
     <BrowserRouter>
+      <Navbar />
       <Routes>
         <Route path="/" element={<Home />} />
-        <Route path="/article:articleId" element={<Article />} />
+        <Route path="/article" element={<Article />} />
       </Routes>
     </BrowserRouter>
   </StrictMode>