diff --git a/packages/docusaurus-theme-classic/src/theme/DocPage/index.js b/packages/docusaurus-theme-classic/src/theme/DocPage/index.js
index c2c448847418..835b5791ae2e 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocPage/index.js
+++ b/packages/docusaurus-theme-classic/src/theme/DocPage/index.js
@@ -18,29 +18,33 @@ import {matchPath} from '@docusaurus/router';
 
 import styles from './styles.module.css';
 
-function matchingRouteExist(routes, pathname) {
-  return routes.some(route => matchPath(pathname, route));
-}
-
 function DocPage(props) {
-  const {route, docsMetadata, location} = props;
+  const {route: baseRoute, docsMetadata, location} = props;
+  // case-sensitive route such as it is defined in the sidebar
+  const currentRoute = baseRoute.routes.find(route =>
+    matchPath(location.pathname, route),
+  );
+
   const {permalinkToSidebar, docsSidebars, version} = docsMetadata;
-  const sidebar = permalinkToSidebar[location.pathname.replace(/\/$/, '')];
-  const {siteConfig: {themeConfig = {}} = {}} = useDocusaurusContext();
+  const sidebar = permalinkToSidebar[currentRoute.path];
+  const {
+    siteConfig: {themeConfig = {}} = {},
+    isClient,
+  } = useDocusaurusContext();
   const {sidebarCollapsible = true} = themeConfig;
 
-  if (!matchingRouteExist(route.routes, location.pathname)) {
+  if (!currentRoute) {
     return <NotFound {...props} />;
   }
 
   return (
-    <Layout version={version}>
+    <Layout version={version} key={isClient}>
       <div className={styles.docPage}>
         {sidebar && (
           <div className={styles.docSidebarContainer}>
             <DocSidebar
               docsSidebars={docsSidebars}
-              location={location}
+              path={currentRoute.path}
               sidebar={sidebar}
               sidebarCollapsible={sidebarCollapsible}
             />
@@ -48,7 +52,7 @@ function DocPage(props) {
         )}
         <main className={styles.docMainContainer}>
           <MDXProvider components={MDXComponents}>
-            {renderRoutes(route.routes)}
+            {renderRoutes(baseRoute.routes)}
           </MDXProvider>
         </main>
       </div>
diff --git a/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.js b/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.js
index 0d01b97b43d7..a994194366d0 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.js
+++ b/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.js
@@ -93,13 +93,13 @@ function DocSidebarItem({item, onItemClick, collapsible}) {
 
 // Calculate the category collapsing state when a page navigation occurs.
 // We want to automatically expand the categories which contains the current page.
-function mutateSidebarCollapsingState(item, location) {
+function mutateSidebarCollapsingState(item, path) {
   const {items, href, type} = item;
   switch (type) {
     case 'category': {
       const anyChildItemsActive =
         items
-          .map(childItem => mutateSidebarCollapsingState(childItem, location))
+          .map(childItem => mutateSidebarCollapsingState(childItem, path))
           .filter(val => val).length > 0;
       // eslint-disable-next-line no-param-reassign
       item.collapsed = !anyChildItemsActive;
@@ -108,7 +108,7 @@ function mutateSidebarCollapsingState(item, location) {
 
     case 'link':
     default:
-      return href === location.pathname.replace(/\/$/, '');
+      return href === path;
   }
 }
 
@@ -121,7 +121,7 @@ function DocSidebar(props) {
 
   const {
     docsSidebars,
-    location,
+    path,
     sidebar: currentSidebar,
     sidebarCollapsible,
   } = props;
@@ -142,7 +142,7 @@ function DocSidebar(props) {
 
   if (sidebarCollapsible) {
     sidebarData.forEach(sidebarItem =>
-      mutateSidebarCollapsingState(sidebarItem, location),
+      mutateSidebarCollapsingState(sidebarItem, path),
     );
   }