diff --git a/src/core/event/index.js b/src/core/event/index.js
index 08b1ba98f..27045888b 100644
--- a/src/core/event/index.js
+++ b/src/core/event/index.js
@@ -389,7 +389,7 @@ export function Events(Base) {
      * @returns Element|undefined
      */
     #markAppNavActiveElm() {
-      const href = this.router.toURL(this.route.path);
+      const href = decodeURIComponent(this.router.toURL(this.route.path));
       const navElm = dom.find('nav.app-nav');
 
       if (!navElm) {
@@ -399,11 +399,17 @@ export function Events(Base) {
       const newActive = dom
         .findAll(navElm, 'a')
         .sort((a, b) => b.href.length - a.href.length)
-        .find(a => href.includes(decodeURI(a.getAttribute('href'))));
+        .find(
+          a =>
+            href.includes(a.getAttribute('href')) ||
+            href.includes(decodeURI(a.getAttribute('href')))
+        );
       const oldActive = dom.find(navElm, 'li.active');
 
-      oldActive?.classList.remove('active');
-      newActive?.classList.add('active');
+      if (newActive && newActive !== oldActive) {
+        oldActive?.classList.remove('active');
+        newActive.classList.add('active');
+      }
 
       return newActive;
     }
@@ -425,10 +431,17 @@ export function Events(Base) {
       }
 
       const oldActive = dom.find(sidebar, 'li.active');
-      const newActive = dom.find(sidebar, `a[href='${href}']`)?.closest('li');
-
-      oldActive?.classList.remove('active');
-      newActive?.classList.add('active');
+      const newActive = dom
+        .find(
+          sidebar,
+          `a[href="${href}"], a[href="${decodeURIComponent(href)}"]`
+        )
+        ?.closest('li');
+
+      if (newActive && newActive !== oldActive) {
+        oldActive?.classList.remove('active');
+        newActive.classList.add('active');
+      }
 
       return newActive;
     }
@@ -451,10 +464,17 @@ export function Events(Base) {
 
       const path = href?.split('?')[0];
       const oldPage = dom.find(sidebar, 'li[aria-current]');
-      const newPage = dom.find(sidebar, `a[href='${path}']`)?.closest('li');
-
-      oldPage?.removeAttribute('aria-current');
-      newPage?.setAttribute('aria-current', 'page');
+      const newPage = dom
+        .find(
+          sidebar,
+          `a[href="${path}"], a[href="${decodeURIComponent(path)}"]`
+        )
+        ?.closest('li');
+
+      if (newPage && newPage !== oldPage) {
+        oldPage?.removeAttribute('aria-current');
+        newPage.setAttribute('aria-current', 'page');
+      }
 
       return newPage;
     }
diff --git a/test/e2e/sidebar.test.js b/test/e2e/sidebar.test.js
index 077826f54..d41fe95cd 100644
--- a/test/e2e/sidebar.test.js
+++ b/test/e2e/sidebar.test.js
@@ -44,6 +44,10 @@ test.describe('Sidebar Tests', () => {
 
     await docsifyInit(docsifyInitConfig);
 
+    await page.click('a[href="#/test"]');
+    await expect(activeLinkElm).toHaveText('Test');
+    expect(page.url()).toMatch(/\/test$/);
+
     await page.click('a[href="#/test%20space"]');
     await expect(activeLinkElm).toHaveText('Test Space');
     expect(page.url()).toMatch(/\/test%20space$/);
@@ -57,15 +61,11 @@ test.describe('Sidebar Tests', () => {
     expect(page.url()).toMatch(/\/test-foo$/);
 
     await page.click('a[href="#/test.foo"]');
-    expect(page.url()).toMatch(/\/test.foo$/);
     await expect(activeLinkElm).toHaveText('Test .');
+    expect(page.url()).toMatch(/\/test.foo$/);
 
     await page.click('a[href="#/test>foo"]');
     await expect(activeLinkElm).toHaveText('Test >');
     expect(page.url()).toMatch(/\/test%3Efoo$/);
-
-    await page.click('a[href="#/test"]');
-    await expect(activeLinkElm).toHaveText('Test');
-    expect(page.url()).toMatch(/\/test$/);
   });
 });