#10, #15 完了

frontend/src/components/TopNav.tsx

@@ -1,20 +1,18 @@
 import React from "react"
+import { Link } from 'react-router-dom'
 
-const TopNav: React.FC = () => {
-  return (
+const TopNav: React.FC = () => (
     <nav className="bg-gray-800 text-white p-3 flex justify-between items-center w-full">
       <div className="flex items-center gap-4">
-        <a href="/" className="text-xl font-bold text-orange-500">ぼざクリ タグ広場</a>
-        <a href="/" className="hover:text-orange-500">広場</a>
-        <a href="/deerjikists" className="hover:text-orange-500">ニジラー</a>
-        <a href="/tags" className="hover:text-orange-500">タグ</a>
-        <a href="/wiki" className="hover:text-orange-500">Wiki</a>
+        <Link to="/" className="text-xl font-bold text-orange-500">ぼざクリ タグ広場</Link>
+        <Link to="/posts" className="hover:text-orange-500">広場</Link>
+        <Link to="/deerjikists" className="hover:text-orange-500">ニジラー</Link>
+        <Link to="/tags" className="hover:text-orange-500">タグ</Link>
+        <Link to="/wiki" className="hover:text-orange-500">Wiki</Link>
       </div>
       <div className="ml-auto pr-4">
-        <a href="/login" className="hover:text-orange-500">ログイン</a>
+        <Link to="/login" className="hover:text-orange-500">ログイン</Link>
       </div>
-    </nav>
-  )
-}
+    </nav>)
 
 export default TopNav