fix(v2): accessing /docs or /docs/xxxx should not be empty (#1903)

* fix(v2): nested routes should have wildcard/ not found page too

* better fix

* nits

* space

CHANGELOG-2.x.md

@@ -9,6 +9,7 @@
 - Refactor dark toggle into a hook.
 - Changed the way we read the `USE_SSH` env variable during deployment to be the same as in v1.
 - Add highlight specific lines in code blocks.
+- Fix accessing `docs/` or `/docs/xxxx` that does not match any existing doc page should return 404 (Not found) page, not blank page.
 
 ## 2.0.0-alpha.31
 

packages/docusaurus-theme-classic/src/theme/DocPage/index.js

@@ -13,9 +13,15 @@ import renderRoutes from '@docusaurus/renderRoutes';
 import Layout from '@theme/Layout';
 import DocSidebar from '@theme/DocSidebar';
 import MDXComponents from '@theme/MDXComponents';
+import NotFound from '@theme/NotFound';
+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 {permalinkToSidebar, docsSidebars} = docsMetadata;
@@ -23,6 +29,10 @@ function DocPage(props) {
   const {siteConfig: {themeConfig = {}} = {}} = useDocusaurusContext();
   const {sidebarCollapsible = true} = themeConfig;
 
+  if (!matchingRouteExist(route.routes, location.pathname)) {
+    return <NotFound {...props} />;
+  }
+
   return (
     <Layout>
       <div className={styles.docPage}>

packages/docusaurus/src/client/exports/router.js

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export * from 'react-router-dom';