diff --git a/src/client/theme-default/components/SideBarLink.ts b/src/client/theme-default/components/SideBarLink.ts
index a0c987c4..b5b903b3 100644
--- a/src/client/theme-default/components/SideBarLink.ts
+++ b/src/client/theme-default/components/SideBarLink.ts
@@ -18,7 +18,7 @@ export const SideBarLink: FunctionalComponent<{
   const text = props.item.text
   const link = resolveLink(site.value.base, props.item.link)
   const children = (props.item as DefaultTheme.SideBarGroup).children
-  const active = isActive(route, link)
+  const active = isActive(route, props.item.link)
   const childItems = createChildren(active, children, headers)
 
   return h('li', { class: 'sidebar-link' }, [
diff --git a/src/client/theme-default/composables/navLink.ts b/src/client/theme-default/composables/navLink.ts
index d35f9b64..c726b931 100644
--- a/src/client/theme-default/composables/navLink.ts
+++ b/src/client/theme-default/composables/navLink.ts
@@ -11,7 +11,7 @@ export function useNavLink(item: Ref<DefaultTheme.NavItemWithLink>) {
   const isExternal = isExternalCheck(item.value.link)
 
   const props = computed(() => {
-    const routePath = normalizePath(route.path)
+    const routePath = normalizePath(`/${route.data.relativePath}`)
 
     let active = false
     if (item.value.activeMatch) {
diff --git a/src/client/theme-default/utils.ts b/src/client/theme-default/utils.ts
index f86d7d4f..4c6f88de 100644
--- a/src/client/theme-default/utils.ts
+++ b/src/client/theme-default/utils.ts
@@ -22,7 +22,7 @@ export function isActive(route: Route, path?: string): boolean {
     return false
   }
 
-  const routePath = normalize(route.path)
+  const routePath = normalize(`/${route.data.relativePath}`)
   const pagePath = normalize(path)
 
   return routePath === pagePath
diff --git a/src/node/build/render.ts b/src/node/build/render.ts
index dbbd3f07..f0c187e6 100644
--- a/src/node/build/render.ts
+++ b/src/node/build/render.ts
@@ -20,21 +20,8 @@ export async function renderPage(
   const { app, router } = createApp()
   const routePath = `/${page.replace(/\.md$/, '')}`
   const siteData = resolveSiteDataByRoute(config.site, routePath)
-
   router.go(routePath)
 
-  // inject `base` path to the route path.
-  //
-  // when a page is rendered on the browser, `route.path` will contain the
-  // `base` path because that is the url users are actually on. however, when
-  // rendering the app here, it doesn't contain the `base` path, as you can
-  // see on the above `router.go` call.
-  //
-  // this causes hydration mismatch because app uses `route.path`, for example,
-  // to do active link check in the navbar. therefore, we inject `base` path
-  // here to make sure the rendering result is consistent.
-  router.route.path = `${siteData.base}${router.route.path}`.replace('//', '/')
-
   // lazy require server-renderer for production build
   const content = await require('@vue/server-renderer').renderToString(app)