fix: broken outline links with basePath config (#144)

wevm · Apr 17, 2024 · 35c6314 · 35c6314
1 parent 7b33927
commit 35c6314
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 6 deletions.
diff --git a/.changeset/wild-poems-film.md b/.changeset/wild-poems-film.md
@@ -0,0 +1,5 @@
+---
+"vocs": patch
+---
+
+Fixed outline with basePath config
diff --git a/src/app/components/Outline.tsx b/src/app/components/Outline.tsx
@@ -1,5 +1,5 @@
-import { Fragment, type ReactElement, useEffect, useMemo, useRef, useState } from 'react'
-import { useLocation } from 'react-router-dom'
+import { Fragment, useEffect, useMemo, useRef, useState, type ReactElement } from 'react'
+import { Link, useLocation } from 'react-router-dom'
 
 import { useConfig } from '../hooks/useConfig.js'
 import { useLayout } from '../hooks/useLayout.js'
@@ -227,18 +227,17 @@ function Items({
         return (
           <Fragment key={id}>
             <li className={styles.item}>
-              {/* biome-ignore lint/a11y/useValidAnchor: */}
-              <a
+              <Link
                 data-active={isActive}
-                href={`${pathname}${hash}`}
+                to={`${pathname}${hash}`}
                 onClick={() => {
                   onClickItem?.()
                   setActiveId(id)
                 }}
                 className={styles.link}
               >
                 {text}
-              </a>
+              </Link>
             </li>
             {nextLevelItems && (
               <Items