src/components/ModCard.tsx

@@ -1,3 +1,4 @@
+import { Link } from 'react-router-dom'
 import '../styles/cardMod.css'
 import { handleModImageError } from '../utils'
 
@@ -6,8 +7,7 @@ type ModCardProps = {
   gameName: string
   summary: string
   imageUrl: string
-  link: string
-  handleClick: () => void
+  route: string
 }
 
 export const ModCard = ({
@@ -15,18 +15,10 @@ export const ModCard = ({
   gameName,
   summary,
   imageUrl,
-  link,
-  handleClick
+  route
 }: ModCardProps) => {
   return (
-    <a
-      className='cardModMainWrapperLink'
-      href={link}
-      onClick={(e) => {
-        e.preventDefault()
-        handleClick()
-      }}
-    >
+    <Link className='cardModMainWrapperLink' to={route}>
       <div className='cardModMain'>
         <div className='cMMPictureWrapper'>
           <img
@@ -95,6 +87,6 @@ export const ModCard = ({
           </div>
         </div>
       </div>
-    </a>
+    </Link>
   )
 }

src/components/ProfileSection.tsx

@@ -1,7 +1,7 @@
 import { Event, Filter, kinds, nip19, UnsignedEvent } from 'nostr-tools'
 import { QRCodeSVG } from 'qrcode.react'
 import { useState } from 'react'
-import { useNavigate } from 'react-router-dom'
+import { Link } from 'react-router-dom'
 import { toast } from 'react-toastify'
 import {
   MetadataController,
@@ -23,7 +23,6 @@ type Props = {
 }
 
 export const ProfileSection = ({ pubkey }: Props) => {
-  const navigate = useNavigate()
   const [profile, setProfile] = useState<UserProfile>()
 
   useDidMount(async () => {
@@ -60,13 +59,9 @@ export const ProfileSection = ({ pubkey }: Props) => {
           <div className='IBMSMSMSSS_Author'>
             <div className='IBMSMSMSSS_Author_Top'>
               <div className='IBMSMSMSSS_Author_Top_Left'>
-                <a
+                <Link
                   className='IBMSMSMSSS_Author_Top_Left_InsideLinkWrapper'
-                  href={`#${profileRoute}`}
-                  onClick={(e) => {
-                    e.preventDefault()
-                    navigate(profileRoute)
-                  }}
+                  to={profileRoute}
                 >
                   <div className='IBMSMSMSSS_Author_Top_Left_Inside'>
                     <div className='IBMSMSMSSS_Author_Top_Left_InsidePic'>
@@ -92,7 +87,7 @@ export const ProfileSection = ({ pubkey }: Props) => {
                       </div>
                     </div>
                   </div>
-                </a>
+                </Link>
                 <div className='IBMSMSMSSS_Author_Top_AddressWrapper'>
                   <div className='IBMSMSMSSS_Author_Top_AddressWrapped'>
                     <p

src/pages/home.tsx

@@ -208,7 +208,6 @@ type DisplayModProps = {
 }
 
 const DisplayMod = ({ naddr }: DisplayModProps) => {
-  const navigate = useNavigate()
   const [mod, setMod] = useState<ModDetails>()
 
   useDidMount(() => {
@@ -249,8 +248,7 @@ const DisplayMod = ({ naddr }: DisplayModProps) => {
       gameName={mod.game}
       summary={mod.summary}
       imageUrl={mod.featuredImageUrl}
-      link={`#${route}`}
-      handleClick={() => navigate(route)}
+      route={route}
     />
   )
 }
@@ -298,8 +296,7 @@ const DisplayLatestMods = () => {
                 gameName={mod.game}
                 summary={mod.summary}
                 imageUrl={mod.featuredImageUrl}
-                link={`#${route}`}
-                handleClick={() => navigate(route)}
+                route={route}
               />
             )
           })

src/pages/mod/internal/comment/index.tsx

@@ -15,7 +15,7 @@ import {
 } from 'nostr-tools'
 import React, { useEffect, useMemo } from 'react'
 import { Dispatch, SetStateAction, useState } from 'react'
-import { useNavigate } from 'react-router-dom'
+import { Link } from 'react-router-dom'
 import { toast } from 'react-toastify'
 import { getProfilePageRoute } from 'routes'
 import { ModDetails, UserProfile } from 'types'
@@ -355,8 +355,6 @@ const Filter = React.memo(
 )
 
 const Comment = (props: CommentEvent) => {
-  const navigate = useNavigate()
-
   const [profile, setProfile] = useState<UserProfile>()
 
   useDidMount(async () => {
@@ -376,19 +374,15 @@ const Comment = (props: CommentEvent) => {
     <div className='IBMSMSMBSSCL_Comment'>
       <div className='IBMSMSMBSSCL_CommentTop'>
         <div className='IBMSMSMBSSCL_CommentTopPPWrapper'>
-          <a
+          <Link
             className='IBMSMSMBSSCL_CommentTopPP'
-            href={`#${profileRoute}`}
-            onClick={(e) => {
-              e.preventDefault()
-              navigate(profileRoute)
-            }}
+            to={profileRoute}
             style={{
               background: `url('${
                 profile?.image || ''
               }') center / cover no-repeat`
             }}
-          ></a>
+          />
         </div>
         <div className='IBMSMSMBSSCL_CommentTopDetailsWrapper'>
           <div className='IBMSMSMBSSCL_CommentTopDetails'>

src/pages/mods.tsx

@@ -7,7 +7,6 @@ import React, {
   useMemo,
   useState
 } from 'react'
-import { useNavigate } from 'react-router-dom'
 import { LoadingSpinner } from '../components/LoadingSpinner'
 import { ModCard } from '../components/ModCard'
 import { MetadataController } from '../controllers'
@@ -48,7 +47,6 @@ interface FilterOptions {
 }
 
 export const ModsPage = () => {
-  const navigate = useNavigate()
   const [isFetching, setIsFetching] = useState(false)
   const [mods, setMods] = useState<ModDetails[]>([])
   const [filterOptions, setFilterOptions] = useState<FilterOptions>({
@@ -223,8 +221,7 @@ export const ModsPage = () => {
                       gameName={mod.game}
                       summary={mod.summary}
                       imageUrl={mod.featuredImageUrl}
-                      link={`#${route}`}
-                      handleClick={() => navigate(route)}
+                      route={route}
                     />
                   )
                 })}