break: upgrade to React Router v8

.syncpackrc.ts

@@ -37,13 +37,7 @@ export default {
         '@docusaurus/theme-common',
         '@docusaurus/types',
       ],
-      dependencies: [
-        'react',
-        'react-dom',
-        '@types/react',
-        '@types/react-router-config',
-        '@types/react-router-dom',
-      ],
+      dependencies: ['react', 'react-dom', '@types/react'],
       isIgnored: true,
     },
 

packages/docusaurus-module-type-aliases/package.json

@@ -15,8 +15,7 @@
     "@docusaurus/types": "3.10.1",
     "@types/history": "^4.7.11",
     "@types/react": "19.2.14",
-    "@types/react-router-config": "*",
-    "@types/react-router-dom": "*",
+    "react-router": "^8.0.0",
     "react-helmet-async": "npm:@slorber/react-helmet-async@1.3.0",
     "react-loadable": "npm:@docusaurus/react-loadable@6.0.0"
   },

packages/docusaurus-module-type-aliases/src/index.d.ts

@@ -41,10 +41,10 @@ declare module '@generated/registry' {
 }
 
 declare module '@generated/routes' {
-  import type {RouteConfig as RRRouteConfig} from 'react-router-config';
+  import type {RouteObject} from 'react-router';
   import type Loadable from 'react-loadable';
 
-  type RouteConfig = RRRouteConfig & {
+  type RouteConfig = RouteObject & {
     path: string;
     component: ReturnType<typeof Loadable>;
   };
@@ -169,7 +169,7 @@ declare module '@docusaurus/Head' {
 
 declare module '@docusaurus/Link' {
   import type {CSSProperties, ComponentProps, ReactNode} from 'react';
-  import type {NavLinkProps as RRNavLinkProps} from 'react-router-dom';
+  import type {NavLinkProps as RRNavLinkProps} from 'react-router';
 
   type NavLinkProps = Partial<RRNavLinkProps>;
   export type Props = NavLinkProps &
@@ -180,6 +180,10 @@ declare module '@docusaurus/Link' {
       readonly to?: string;
       readonly href?: string;
       readonly autoAddBaseUrl?: boolean;
+      // TODO double check these,
+      //  comes from https://github.com/facebook/docusaurus/pull/6037
+      readonly isActive?: boolean;
+      readonly activeClassName?: string;
 
       /** Escape hatch in case broken links check doesn't make sense. */
       readonly 'data-noBrokenLinkCheck'?: boolean;
@@ -260,7 +264,9 @@ declare module '@docusaurus/Translate' {
 }
 
 declare module '@docusaurus/router' {
-  export {useHistory, useLocation, Redirect, matchPath} from 'react-router-dom';
+  // TODO expose everything?
+  //  remove abstraction?
+  export {useNavigate, useLocation, Redirect, matchPath} from 'react-router';
 }
 
 declare module '@docusaurus/useIsomorphicLayoutEffect' {
@@ -351,9 +357,9 @@ declare module '@docusaurus/Noop' {
 }
 
 declare module '@docusaurus/renderRoutes' {
-  import {renderRoutes} from 'react-router-config';
+  import {useRoutes} from 'react-router';
 
-  export default renderRoutes;
+  export default useRoutes;
 }
 
 declare module '@docusaurus/useGlobalData' {

packages/docusaurus-plugin-content-docs/package.json

@@ -44,7 +44,6 @@
     "@docusaurus/utils": "3.10.1",
     "@docusaurus/utils-common": "3.10.1",
     "@docusaurus/utils-validation": "3.10.1",
-    "@types/react-router-config": "^5.0.7",
     "combine-promises": "^1.1.0",
     "fs-extra": "^11.2.0",
     "js-yaml": "^4.1.0",

packages/docusaurus-plugin-content-docs/src/client/__tests__/docsUtils.test.tsx

@@ -8,7 +8,7 @@
 import {describe, expect, it} from 'vitest';
 import React from 'react';
 import {renderHook} from '@testing-library/react';
-import {StaticRouter} from 'react-router-dom';
+import {StaticRouter} from 'react-router';
 import {Context} from '@docusaurus/core/src/client/docusaurusContext';
 import {
   findFirstSidebarItemLink,

packages/docusaurus-plugin-content-docs/src/client/docsClientUtils.ts

@@ -32,11 +32,15 @@ export function getActivePlugin(
     .sort((a, b) => b[1].path.localeCompare(a[1].path))
     .find(
       ([, pluginData]) =>
-        !!matchPath(pathname, {
-          path: pluginData.path,
-          exact: false,
-          strict: false,
-        }),
+        !!matchPath(
+          pathname,
+          // @ts-expect-error: TODO review
+          {
+            path: pluginData.path,
+            exact: false,
+            strict: false,
+          },
+        ),
     );
 
   const activePlugin: ActivePlugin | undefined = activeEntry
@@ -81,11 +85,15 @@ export function getActiveVersion(
 
   return sortedVersions.find(
     (version) =>
-      !!matchPath(pathname, {
-        path: version.path,
-        exact: false,
-        strict: false,
-      }),
+      !!matchPath(
+        pathname,
+        // @ts-expect-error: TODO review
+        {
+          path: version.path,
+          exact: false,
+          strict: false,
+        },
+      ),
   );
 }
 
@@ -96,11 +104,16 @@ export function getActiveDocContext(
   const activeVersion = getActiveVersion(data, pathname);
   const activeDoc = activeVersion?.docs.find(
     (doc) =>
-      !!matchPath(pathname, {
-        path: doc.path,
-        exact: true,
-        strict: false,
-      }),
+      !!matchPath(
+        pathname,
+        // @ts-expect-error: TODO review
+
+        {
+          path: doc.path,
+          exact: true,
+          strict: false,
+        },
+      ),
   );
 
   function getAlternateVersionDocs(

packages/docusaurus-plugin-content-docs/src/client/docsUtils.tsx

@@ -6,6 +6,7 @@
  */
 
 import {type ReactNode, useMemo} from 'react';
+import {type RouteObject} from 'react-router';
 import {matchPath, useLocation} from '@docusaurus/router';
 import renderRoutes from '@docusaurus/renderRoutes';
 import {
@@ -401,15 +402,19 @@ export function useDocRootMetadata({route}: DocRootProps): null | {
 } {
   const location = useLocation();
   const versionMetadata = useDocsVersion();
-  const docRoutes = route.routes!;
+
+  // TODO review
+  const docRoutes = (route as any).routes as RouteObject[];
   const currentDocRoute = docRoutes.find((docRoute) =>
-    matchPath(location.pathname, docRoute),
+    matchPath(docRoute.path!, location.pathname),
   );
+
   if (!currentDocRoute) {
     return null;
   }
 
   // For now, the sidebarName is added as route config: not ideal!
+  // @ts-expect-error: TODO review
   const sidebarName = currentDocRoute.sidebar as string;
 
   const sidebarItems = sidebarName

packages/docusaurus-plugin-content-docs/src/plugin-content-docs.d.ts

@@ -635,21 +635,23 @@ declare module '@theme/DocBreadcrumbs' {
 
 declare module '@theme/DocsRoot' {
   import type {ReactNode} from 'react';
-  import type {RouteConfigComponentProps} from 'react-router-config';
   import type {Required} from 'utility-types';
 
-  export interface Props extends Required<RouteConfigComponentProps, 'route'> {}
+  type RouteProps = {}; // TODO
+
+  export interface Props extends Required<RouteProps, 'route'> {}
 
   export default function DocsRoot(props: Props): ReactNode;
 }
 
 declare module '@theme/DocVersionRoot' {
   import type {ReactNode} from 'react';
   import type {PropVersionMetadata} from '@docusaurus/plugin-content-docs';
-  import type {RouteConfigComponentProps} from 'react-router-config';
   import type {Required} from 'utility-types';
 
-  export interface Props extends Required<RouteConfigComponentProps, 'route'> {
+  type RouteProps = {}; // TODO
+
+  export interface Props extends Required<RouteProps, 'route'> {
     readonly version: PropVersionMetadata;
   }
 
@@ -658,10 +660,11 @@ declare module '@theme/DocVersionRoot' {
 
 declare module '@theme/DocRoot' {
   import type {ReactNode} from 'react';
-  import type {RouteConfigComponentProps} from 'react-router-config';
   import type {Required} from 'utility-types';
 
-  export interface Props extends Required<RouteConfigComponentProps, 'route'> {}
+  type RouteProps = {}; // TODO
+
+  export interface Props extends Required<RouteProps, 'route'> {}
 
   export default function DocRoot(props: Props): ReactNode;
 }

packages/docusaurus-plugin-content-docs/src/routes.ts

@@ -14,6 +14,7 @@ import {
   groupTaggedItems,
   getTagVisibility,
 } from '@docusaurus/utils';
+import {addTrailingSlash} from '@docusaurus/utils-common';
 import {
   toTagDocListProp,
   toTagsListTagsProp,
@@ -107,7 +108,7 @@ async function buildVersionSidebarRoute(param: BuildVersionRoutesParam) {
   ]);
   const subRoutes = [...docRoutes, ...categoryGeneratedIndexRoutes];
   return {
-    path: param.version.path,
+    path: addTrailingSlash(param.version.path),
     exact: false,
     component: param.options.docRootComponent,
     routes: subRoutes,
@@ -196,7 +197,7 @@ async function buildVersionRoutes(
 
   async function doBuildVersionRoutes(): Promise<RouteConfig> {
     return {
-      path: version.path,
+      path: addTrailingSlash(version.path),
       exact: false,
       component: options.docVersionRootComponent,
       routes: await buildVersionSubRoutes(),

packages/docusaurus-theme-classic/package.json

@@ -42,7 +42,6 @@
     "postcss": "^8.5.12",
     "prism-react-renderer": "^2.4.1",
     "prismjs": "^1.29.0",
-    "react-router-dom": "^5.3.4",
     "rtlcss": "^4.1.0",
     "tslib": "^2.6.0",
     "utility-types": "^3.10.0"

packages/docusaurus-theme-classic/src/theme/DocRoot/index.tsx

@@ -7,6 +7,7 @@
 
 import React, {type ReactNode} from 'react';
 import clsx from 'clsx';
+import {useMatches} from 'react-router';
 import {HtmlClassNameProvider, ThemeClassNames} from '@docusaurus/theme-common';
 import {
   DocsSidebarProvider,
@@ -17,6 +18,9 @@ import NotFoundContent from '@theme/NotFound/Content';
 import type {Props} from '@theme/DocRoot';
 
 export default function DocRoot(props: Props): ReactNode {
+  const matches = useMatches();
+  console.log('DocRoot props', {props, matches});
+
   const currentDocRouteMetadata = useDocRootMetadata(props);
   if (!currentDocRouteMetadata) {
     // We only render the not found content to avoid a double layout

packages/docusaurus-theme-classic/src/theme/DocVersionRoot/index.tsx

@@ -6,12 +6,12 @@
  */
 
 import React, {type ReactNode} from 'react';
+import {Outlet} from 'react-router';
 import {HtmlClassNameProvider, PageMetadata} from '@docusaurus/theme-common';
 import {
   getDocsVersionSearchTag,
   DocsVersionProvider,
 } from '@docusaurus/plugin-content-docs/client';
-import renderRoutes from '@docusaurus/renderRoutes';
 import SearchMetadata from '@theme/SearchMetadata';
 
 import type {Props} from '@theme/DocVersionRoot';
@@ -32,11 +32,11 @@ function DocVersionRootMetadata(props: Props): ReactNode {
 }
 
 function DocVersionRootContent(props: Props): ReactNode {
-  const {version, route} = props;
+  const {version} = props;
   return (
     <HtmlClassNameProvider className={version.className}>
       <DocsVersionProvider version={version}>
-        {renderRoutes(route.routes!)}
+        <Outlet />
       </DocsVersionProvider>
     </HtmlClassNameProvider>
   );

packages/docusaurus-theme-classic/src/theme/DocsRoot/index.tsx

@@ -8,15 +8,17 @@
 import React, {type ReactNode} from 'react';
 import clsx from 'clsx';
 import {ThemeClassNames, HtmlClassNameProvider} from '@docusaurus/theme-common';
-import renderRoutes from '@docusaurus/renderRoutes';
+import {Outlet} from 'react-router';
 import Layout from '@theme/Layout';
 
 import type {Props} from '@theme/DocVersionRoot';
 
-export default function DocsRoot(props: Props): ReactNode {
+export default function DocsRoot(_props: Props): ReactNode {
   return (
     <HtmlClassNameProvider className={clsx(ThemeClassNames.wrapper.docsPages)}>
-      <Layout>{renderRoutes(props.route.routes!)}</Layout>
+      <Layout>
+        <Outlet />
+      </Layout>
     </HtmlClassNameProvider>
   );
 }

packages/docusaurus-theme-classic/src/theme/Layout/index.tsx

@@ -15,7 +15,7 @@ import {
 } from '@docusaurus/theme-common';
 import SkipToContent from '@theme/SkipToContent';
 import AnnouncementBar from '@theme/AnnouncementBar';
-import Navbar from '@theme/Navbar';
+// import Navbar from '@theme/Navbar';
 import Footer from '@theme/Footer';
 import LayoutProvider from '@theme/Layout/Provider';
 import ErrorPageContent from '@theme/ErrorPageContent';
@@ -40,7 +40,9 @@ export default function Layout(props: Props): ReactNode {
 
       <AnnouncementBar />
 
+      {/*
       <Navbar />
+      */}
 
       <div
         id={SkipToContentFallbackId}

packages/docusaurus-theme-classic/src/theme/NavbarItem/DocNavbarItem.tsx

@@ -32,6 +32,7 @@ export default function DocNavbarItem({
     <DefaultNavbarItem
       exact
       {...props}
+      // @ts-expect-error: TODO review
       isActive={() =>
         pageActive ||
         (!!activeDoc?.sidebar && activeDoc.sidebar === doc.sidebar)

packages/docusaurus-theme-classic/src/theme/NavbarItem/DocSidebarNavbarItem.tsx

@@ -30,6 +30,7 @@ export default function DocSidebarNavbarItem({
     <DefaultNavbarItem
       exact
       {...props}
+      // @ts-expect-error: TODO review
       isActive={() => activeDoc?.sidebar === sidebarId}
       label={label ?? sidebarLink.label}
       to={sidebarLink.path}

packages/docusaurus-theme-classic/src/theme/NavbarItem/DocsVersionDropdownNavbarItem.tsx

@@ -138,6 +138,7 @@ export default function DocsVersionDropdownNavbarItem({
       label,
       // preserve ?search#hash suffix on version switches
       to: `${targetDoc.path}${search}${hash}`,
+      // @ts-expect-error: TODO review
       isActive: () => version === activeDocContext.activeVersion,
       onClick: () => savePreferredVersionName(version.name),
     };
@@ -176,6 +177,7 @@ export default function DocsVersionDropdownNavbarItem({
         mobile={mobile}
         label={dropdownLabel}
         to={dropdownTo}
+        // @ts-expect-error: TODO review
         isActive={dropdownActiveClassDisabled ? () => false : undefined}
       />
     );
@@ -188,6 +190,7 @@ export default function DocsVersionDropdownNavbarItem({
       label={dropdownLabel}
       to={dropdownTo}
       items={items}
+      // @ts-expect-error: TODO review
       isActive={dropdownActiveClassDisabled ? () => false : undefined}
     />
   );