diff --git a/packages/docusaurus-theme-classic/src/theme/DocPage/index.js b/packages/docusaurus-theme-classic/src/theme/DocPage/index.js
index adee2291b8..f73c73cfc9 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocPage/index.js
+++ b/packages/docusaurus-theme-classic/src/theme/DocPage/index.js
@@ -18,47 +18,53 @@ import {matchPath} from '@docusaurus/router';
 
 import styles from './styles.module.css';
 
-function DocPage(props) {
-  const {route: baseRoute, docsMetadata, location} = props;
-  // case-sensitive route such as it is defined in the sidebar
-  const currentRoute =
-    baseRoute.routes.find((route) => {
-      return matchPath(location.pathname, route);
-    }) || {};
-  const {permalinkToSidebar, docsSidebars, version} = docsMetadata;
-  const sidebar = permalinkToSidebar[currentRoute.path];
+function DocPageContent({currentDocRoute, docsMetadata, children}) {
   const {
     siteConfig: {themeConfig = {}} = {},
     isClient,
   } = useDocusaurusContext();
-
-  const {sidebarCollapsible = true} = themeConfig;
-
-  if (Object.keys(currentRoute).length === 0) {
-    return <NotFound {...props} />;
-  }
-
+  const {permalinkToSidebar, docsSidebars, version} = docsMetadata;
+  const sidebarName = permalinkToSidebar[currentDocRoute.path];
+  const sidebar = docsSidebars[sidebarName];
   return (
     <Layout version={version} key={isClient}>
       <div className={styles.docPage}>
         {sidebar && (
           <div className={styles.docSidebarContainer} role="complementary">
             <DocSidebar
-              docsSidebars={docsSidebars}
-              path={currentRoute.path}
               sidebar={sidebar}
-              sidebarCollapsible={sidebarCollapsible}
+              path={currentDocRoute.path}
+              sidebarCollapsible={themeConfig.sidebarCollapsible}
             />
           </div>
         )}
-        <main className={styles.docMainContainer}>
-          <MDXProvider components={MDXComponents}>
-            {renderRoutes(baseRoute.routes)}
-          </MDXProvider>
-        </main>
+        <main className={styles.docMainContainer}>{children}</main>
       </div>
     </Layout>
   );
 }
 
+function DocPage(props) {
+  const {
+    route: {routes: subroutes},
+    docsMetadata,
+    location,
+  } = props;
+  const currentDocRoute = subroutes.find((subroute) =>
+    matchPath(location.pathname, subroute),
+  );
+  if (!currentDocRoute) {
+    return <NotFound {...props} />;
+  }
+  return (
+    <MDXProvider components={MDXComponents}>
+      <DocPageContent
+        currentDocRoute={currentDocRoute}
+        docsMetadata={docsMetadata}>
+        {renderRoutes(subroutes)}
+      </DocPageContent>
+    </MDXProvider>
+  );
+}
+
 export default DocPage;
diff --git a/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.js b/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.js
index 38504c8ab3..5ed1d576c8 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.js
+++ b/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.js
@@ -163,7 +163,7 @@ function DocSidebarItem(props) {
   }
 }
 
-function DocSidebar(props) {
+function DocSidebar({path, sidebar, sidebarCollapsible = true}) {
   const [showResponsiveSidebar, setShowResponsiveSidebar] = useState(false);
   const {
     siteConfig: {
@@ -175,13 +175,6 @@ function DocSidebar(props) {
   const {isAnnouncementBarClosed} = useUserPreferencesContext();
   const {scrollY} = useScrollPosition();
 
-  const {
-    docsSidebars,
-    path,
-    sidebar: currentSidebar,
-    sidebarCollapsible,
-  } = props;
-
   useLockBodyScroll(showResponsiveSidebar);
   const windowSize = useWindowSize();
 
@@ -191,18 +184,6 @@ function DocSidebar(props) {
     }
   }, [windowSize]);
 
-  if (!currentSidebar) {
-    return null;
-  }
-
-  const sidebarData = docsSidebars[currentSidebar];
-
-  if (!sidebarData) {
-    throw new Error(
-      `Cannot find the sidebar "${currentSidebar}" in the sidebar config!`,
-    );
-  }
-
   return (
     <div
       className={clsx(styles.sidebar, {
@@ -264,7 +245,7 @@ function DocSidebar(props) {
           )}
         </button>
         <ul className="menu__list">
-          {sidebarData.map((item) => (
+          {sidebar.map((item) => (
             <DocSidebarItem
               key={item.label}
               item={item}