#140

frontend/src/components/TagDetailSidebar.tsx

@@ -10,9 +10,9 @@ import axios from 'axios'
 import toCamel from 'camelcase-keys'
 import { AnimatePresence, motion } from 'framer-motion'
 import { useEffect, useRef, useState } from 'react'
-import { Link } from 'react-router-dom'
 
 import DraggableDroppableTagRow from '@/components/DraggableDroppableTagRow'
+import PrefetchLink from '@/components/PrefetchLink'
 import TagLink from '@/components/TagLink'
 import TagSearch from '@/components/TagSearch'
 import SectionTitle from '@/components/common/SectionTitle'
@@ -389,7 +389,7 @@ export default (({ post }: Props) => {
 			  </>)}
 		    </li>
 		    <li>
-		      <Link to={`/posts/changes?id=${ post.id }`}>履歴</Link>
+		      <PrefetchLink to={`/posts/changes?id=${ post.id }`}>履歴</PrefetchLink>
 		    </li>
 		  </ul>
 		</div>)}

frontend/src/components/TagLink.tsx

@@ -1,6 +1,5 @@
 import axios from 'axios'
 import { useEffect, useState } from 'react'
-import { Link } from 'react-router-dom'
 
 import PrefetchLink from '@/components/PrefetchLink'
 import { API_BASE_URL } from '@/config'
@@ -18,10 +17,14 @@ type CommonProps = { tag:         Tag
 		     prefetch?:   boolean }
 
 type PropsWithLink =
-    CommonProps & { linkFlg?: true } & Partial<ComponentProps<typeof Link>>
+    & CommonProps
+    & { linkFlg?: true }
+    & Partial<ComponentProps<typeof PrefetchLink>>
 
 type PropsWithoutLink =
-    CommonProps & { linkFlg: false } & Partial<HTMLAttributes<HTMLSpanElement>>
+    & CommonProps
+    & { linkFlg: false }
+    & Partial<HTMLAttributes<HTMLSpanElement>>
 
 type Props = PropsWithLink | PropsWithoutLink
 
@@ -76,17 +79,17 @@ export default (({ tag,
 	    <span className="mr-1">
 	      {havingWiki
 	       ? (
-		  <Link to={`/wiki/${ encodeURIComponent (tag.name) }`}
+		  <PrefetchLink to={`/wiki/${ encodeURIComponent (tag.name) }`}
 			className={linkClass}>
 		    ?
-		  </Link>)
+		  </PrefetchLink>)
 	       : (
-		  <Link to={`/wiki/${ encodeURIComponent (tag.name) }`}
+		  <PrefetchLink to={`/wiki/${ encodeURIComponent (tag.name) }`}
 			className="animate-[wiki-blink_.25s_steps(2,end)_infinite]
 				   dark:animate-[wiki-blink-dark_.25s_steps(2,end)_infinite]"
 			title={`${ tag.name } Wiki が存在しません．`}>
 		    !
-		  </Link>)}
+		  </PrefetchLink>)}
 	    </span>)}
 	{nestLevel > 0 && (
 	    <span
@@ -110,12 +113,12 @@ export default (({ tag,
 		  {...props}>
 		{tag.name}
 	      </PrefetchLink>
-	    : <Link
+	    : <PrefetchLink
 		  to={`/posts?${ (new URLSearchParams ({ tags: tag.name })).toString () }`}
 		  className={linkClass}
 		  {...props}>
 		{tag.name}
-	      </Link>)
+	      </PrefetchLink>)
 	 : (
 	    <span className={spanClass}
 		  {...props}>

frontend/src/components/TopNavUser.tsx

@@ -1,6 +1,5 @@
-import { Link } from 'react-router-dom'
-
 import Separator from '@/components/MenuSeparator'
+import PrefetchLink from '@/components/PrefetchLink'
 import { cn } from '@/lib/utils'
 
 import type { FC } from 'react'
@@ -24,9 +23,9 @@ export default (({ user, sp }: Props) => {
   return (
       <>
 	{sp && <Separator/>}
-	<Link to="/users/settings"
+	<PrefetchLink to="/users/settings"
 	      className={className}>
 	  {user.name || '名もなきニジラー'}
-	</Link>
+	</PrefetchLink>
       </>)
 }) satisfies FC<Props>

frontend/src/components/WikiBody.tsx

@@ -2,9 +2,9 @@ import axios from 'axios'
 import toCamel from 'camelcase-keys'
 import { useEffect, useMemo, useState } from 'react'
 import ReactMarkdown from 'react-markdown'
-import { Link } from 'react-router-dom'
 import remarkGFM from 'remark-gfm'
 
+import PrefetchLink from '@/components/PrefetchLink'
 import SectionTitle from '@/components/common/SectionTitle'
 import SubsectionTitle from '@/components/common/SubsectionTitle'
 import { API_BASE_URL } from '@/config'
@@ -24,7 +24,7 @@ const mdComponents = { h1:  ({ children }) => <SectionTitle>{children}</SectionT
 		       ul:  ({ children }) => <ul className="list-disc pl-6">{children}</ul>,
 		       a:   (({ href, children }) => (
 				['/', '.'].some (e => href?.startsWith (e))
-			        ? <Link to={href!}>{children}</Link>
+			        ? <PrefetchLink to={href!}>{children}</PrefetchLink>
 			        : (
 				    <a href={href}
 				       target="_blank"

frontend/src/pages/posts/PostHistoryPage.tsx

@@ -2,9 +2,10 @@ import axios from 'axios'
 import toCamel from 'camelcase-keys'
 import { useEffect, useState } from 'react'
 import { Helmet } from 'react-helmet-async'
-import { Link, useLocation } from 'react-router-dom'
+import { useLocation } from 'react-router-dom'
 
 import TagLink from '@/components/TagLink'
+import PrefetchLink from '@/components/PrefetchLink'
 import PageTitle from '@/components/common/PageTitle'
 import Pagination from '@/components/common/Pagination'
 import MainArea from '@/components/layout/MainArea'
@@ -48,7 +49,7 @@ export default (() => {
 
 	<PageTitle>
 	  耕作履歴
-	  {id && <>: 投稿 {<Link to={`/posts/${ id }`}>#{id}</Link>}</>}
+	  {id && <>: 投稿 {<PrefetchLink to={`/posts/${ id }`}>#{id}</PrefetchLink>}</>}
 	</PageTitle>
 
 	<table className="table-auto w-full border-collapse">
@@ -75,12 +76,12 @@ export default (() => {
 		  <tr key={`${ change.timestamp }-${ change.post.id }-${ change.tag.id }`}>
 		    {withPost && (
 			<td className="align-top" rowSpan={rowsCnt}>
-			  <Link to={`/posts/${ change.post.id }`}>
+			  <PrefetchLink to={`/posts/${ change.post.id }`}>
 			    <img src={change.post.thumbnail || change.post.thumbnailBase || undefined}
 				 alt={change.post.title || change.post.url}
 				 title={change.post.title || change.post.url || undefined}
 				 className="w-40"/>
-			  </Link>
+			  </PrefetchLink>
 			</td>)}
 		    <td>
 		      <TagLink tag={change.tag} withWiki={false} withCount={false}/>
@@ -88,9 +89,9 @@ export default (() => {
 		    </td>
 		    <td>
 		      {change.user ? (
-			  <Link to={`/users/${ change.user.id }`}>
+			  <PrefetchLink to={`/users/${ change.user.id }`}>
 			    {change.user.name}
-			  </Link>) : 'bot 操作'}
+			  </PrefetchLink>) : 'bot 操作'}
 		      <br/>
 		      {change.timestamp}
 		    </td>

frontend/src/pages/wiki/WikiHistoryPage.tsx

@@ -2,8 +2,9 @@ import axios from 'axios'
 import toCamel from 'camelcase-keys'
 import { useEffect, useState } from 'react'
 import { Helmet } from 'react-helmet-async'
-import { Link, useLocation } from 'react-router-dom'
+import { useLocation } from 'react-router-dom'
 
+import PrefetchLink from '@/components/PrefetchLink'
 import MainArea from '@/components/layout/MainArea'
 import { API_BASE_URL, SITE_TITLE } from '@/config'
 
@@ -44,22 +45,24 @@ export default () => {
 		<tr key={change.revisionId}>
 		  <td>
 		    {change.pred != null && (
-			<Link to={`/wiki/${ change.wikiPage.id }/diff?from=${ change.pred }&to=${ change.revisionId }`}>
+			<PrefetchLink
+			    to={`/wiki/${ change.wikiPage.id }/diff?from=${ change.pred }&to=${ change.revisionId }`}>
 			  差分
-			</Link>)}
+			</PrefetchLink>)}
 		  </td>
 		  <td className="p-2">
-		    <Link to={`/wiki/${ encodeURIComponent (change.wikiPage.title) }?version=${ change.revisionId }`}>
+		    <PrefetchLink
+			to={`/wiki/${ encodeURIComponent (change.wikiPage.title) }?version=${ change.revisionId }`}>
 		      {change.wikiPage.title}
-		    </Link>
+		    </PrefetchLink>
 		  </td>
 		  <td className="p-2">
 		    {change.pred == null ? '新規' : '更新'}
 		  </td>
 		  <td className="p-2">
-		    <Link to={`/users/${ change.user.id }`}>
+		    <PrefetchLink to={`/users/${ change.user.id }`}>
 		      {change.user.name}
-		    </Link>
+		    </PrefetchLink>
 		    <br/>
 		    {change.timestamp}
 		  </td>