break(core): upgrade to React Router v8 (AI-assisted)

knip.config.ts

@@ -139,10 +139,6 @@ const config: KnipConfig = ({
       // Knip doesn't detect imports in "declare module" blocks
       ignoreDependencies: ['utility-types'],
     },
-    'packages/docusaurus-plugin-content-docs': {
-      // Knip doesn't detect imports in "declare module" blocks
-      ignoreDependencies: ['@types/react-router-config'],
-    },
     'packages/docusaurus-plugin-debug': themePackageConfig(),
     // Client modules are resolved through getClientModules()
     'packages/docusaurus-plugin-google-gtag': {

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

@@ -13,13 +13,11 @@
   },
   "dependencies": {
     "@docusaurus/types": "workspace:*",
-    "@types/history": "catalog:",
     "@types/react": "19.3.0",
     "@types/react-dom": "catalog:",
-    "@types/react-router-config": "catalog:",
-    "@types/react-router-dom": "catalog:",
     "react-helmet-async": "catalog:",
-    "react-loadable": "catalog:"
+    "react-loadable": "catalog:",
+    "react-router": "catalog:"
   },
   "peerDependencies": {
     "react": "catalog:",

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

@@ -41,12 +41,19 @@ declare module '@generated/registry' {
 }
 
 declare module '@generated/routes' {
-  import type {RouteConfig as RRRouteConfig} from 'react-router-config';
-  import type Loadable from 'react-loadable';
+  import type {ComponentType} from 'react';
+  import type {LoadableComponent} from 'react-loadable';
 
-  type RouteConfig = RRRouteConfig & {
+  /**
+   * The client-side route config, passed to the route component as a `route`
+   * prop.
+   */
+  export type RouteConfig = {
     path: string;
-    component: ReturnType<typeof Loadable>;
+    component: ComponentType<{route: RouteConfig}> & LoadableComponent;
+    exact?: boolean;
+    routes?: RouteConfig[];
+    [attributeName: string]: unknown;
   };
   const routes: RouteConfig[];
   export default routes;
@@ -169,14 +176,22 @@ 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 {LinkProps, Location, PathMatch} from 'react-router';
 
-  type NavLinkProps = Partial<RRNavLinkProps>;
-  export type Props = NavLinkProps &
+  export type Props = Partial<LinkProps> &
     ComponentProps<'a'> & {
       readonly className?: string;
       readonly style?: CSSProperties;
       readonly isNavLink?: boolean;
+      /** NavLink only: active only when the location matches exactly. */
+      readonly exact?: boolean;
+      /** NavLink only: class name added when the link is active. */
+      readonly activeClassName?: string;
+      /** NavLink only: overrides the default active state computation. */
+      readonly isActive?: (
+        match: PathMatch | null,
+        location: Location,
+      ) => boolean;
       readonly to?: string;
       readonly href?: string;
       readonly autoAddBaseUrl?: boolean;
@@ -260,7 +275,14 @@ declare module '@docusaurus/Translate' {
 }
 
 declare module '@docusaurus/router' {
-  export {useHistory, useLocation, Redirect, matchPath} from 'react-router-dom';
+  export {
+    useLocation,
+    useNavigate,
+    Navigate,
+    Outlet,
+    matchPath,
+    type Location,
+  } from 'react-router';
 }
 
 // TODO Docusaurus v5: remove this deprecated hook
@@ -355,12 +377,6 @@ declare module '@docusaurus/Noop' {
   export default function (): null;
 }
 
-declare module '@docusaurus/renderRoutes' {
-  import {renderRoutes} from 'react-router-config';
-
-  export default renderRoutes;
-}
-
 declare module '@docusaurus/useGlobalData' {
   import type {GlobalData, UseDataOptions} from '@docusaurus/types';
 

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

@@ -46,7 +46,6 @@
     "@docusaurus/utils": "workspace:*",
     "@docusaurus/utils-common": "workspace:*",
     "@docusaurus/utils-validation": "workspace:*",
-    "@types/react-router-config": "catalog:",
     "combine-promises": "catalog:",
     "js-yaml": "catalog:",
     "lodash": "catalog:",
@@ -58,10 +57,9 @@
   "devDependencies": {
     "@total-typescript/shoehorn": "catalog:dev",
     "@types/picomatch": "catalog:dev",
-    "@types/react-router-dom": "catalog:",
     "commander": "catalog:",
     "picomatch": "catalog:dev",
-    "react-router-dom": "catalog:"
+    "react-router": "catalog:"
   },
   "peerDependencies": {
     "react": "catalog:",

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

@@ -7,7 +7,7 @@
 // @vitest-environment jsdom
 import {describe, expect, it} from 'vitest';
 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 {RouteContextProvider} from '@docusaurus/core/src/client/routeContext';
 import {

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

@@ -32,11 +32,7 @@ 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({path: pluginData.path, end: false}, pathname),
     );
 
   const activePlugin: ActivePlugin | undefined = activeEntry
@@ -80,12 +76,7 @@ export function getActiveVersion(
   });
 
   return sortedVersions.find(
-    (version) =>
-      !!matchPath(pathname, {
-        path: version.path,
-        exact: false,
-        strict: false,
-      }),
+    (version) => !!matchPath({path: version.path, end: false}, pathname),
   );
 }
 
@@ -95,12 +86,7 @@ export function getActiveDocContext(
 ): ActiveDocContext {
   const activeVersion = getActiveVersion(data, pathname);
   const activeDoc = activeVersion?.docs.find(
-    (doc) =>
-      !!matchPath(pathname, {
-        path: doc.path,
-        exact: true,
-        strict: false,
-      }),
+    (doc) => !!matchPath({path: doc.path, end: true}, pathname),
   );
 
   function getAlternateVersionDocs(

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

@@ -6,8 +6,7 @@
  */
 
 import {type ReactNode, useMemo} from 'react';
-import {matchPath, useLocation} from '@docusaurus/router';
-import renderRoutes from '@docusaurus/renderRoutes';
+import {matchPath, useLocation, Outlet} from '@docusaurus/router';
 import {
   useActivePlugin,
   useActiveDocContext,
@@ -403,7 +402,7 @@ export function useDocRootMetadata({route}: DocRootProps): null | {
   const versionMetadata = useDocsVersion();
   const docRoutes = route.routes!;
   const currentDocRoute = docRoutes.find((docRoute) =>
-    matchPath(location.pathname, docRoute),
+    matchPath(docRoute.path, location.pathname),
   );
   if (!currentDocRoute) {
     return null;
@@ -416,7 +415,7 @@ export function useDocRootMetadata({route}: DocRootProps): null | {
     ? versionMetadata.docsSidebars[sidebarName]
     : undefined;
 
-  const docElement = renderRoutes(docRoutes);
+  const docElement = <Outlet />;
 
   return {
     docElement,

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

@@ -634,30 +634,33 @@ 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';
+  import type {RouteConfig} from '@generated/routes';
 
-  export interface Props extends Required<RouteConfigComponentProps, 'route'> {}
+  export interface Props {
+    readonly route: RouteConfig;
+  }
 
   export default function DocsRoot(props: Props): ReactNode;
 }
 
 declare module '@theme/DocVersionRoot' {
   import type {ReactNode} from 'react';
-  import type {RouteConfigComponentProps} from 'react-router-config';
-  import type {Required} from 'utility-types';
+  import type {RouteConfig} from '@generated/routes';
 
-  export interface Props extends Required<RouteConfigComponentProps, 'route'> {}
+  export interface Props {
+    readonly route: RouteConfig;
+  }
 
   export default function DocVersionRoot(props: Props): ReactNode;
 }
 
 declare module '@theme/DocRoot' {
   import type {ReactNode} from 'react';
-  import type {RouteConfigComponentProps} from 'react-router-config';
-  import type {Required} from 'utility-types';
+  import type {RouteConfig} from '@generated/routes';
 
-  export interface Props extends Required<RouteConfigComponentProps, 'route'> {}
+  export interface Props {
+    readonly route: RouteConfig;
+  }
 
   export default function DocRoot(props: Props): ReactNode;
 }

packages/docusaurus-plugin-debug/src/theme/DebugLayout/index.tsx

@@ -17,9 +17,7 @@ function DebugNavLink({to, children}: {to: string; children: ReactNode}) {
       isNavLink
       to={to}
       exact
-      activeStyle={{
-        backgroundColor: '#363739',
-      }}>
+      activeClassName={styles.navlinkActive}>
       {children}
     </Link>
   );

packages/docusaurus-plugin-debug/src/theme/DebugLayout/styles.module.css

@@ -39,6 +39,10 @@
   padding: 6px;
 }
 
+.navlinkActive {
+  background-color: #363739;
+}
+
 .navlink:hover {
   text-decoration: none;
   background-color: #292a2b;

packages/docusaurus-theme-classic/package.json

@@ -48,9 +48,8 @@
   "devDependencies": {
     "@types/nprogress": "catalog:dev",
     "@types/prismjs": "catalog:dev",
-    "@types/react-router-dom": "catalog:",
     "@types/rtlcss": "catalog:dev",
-    "react-router-dom": "catalog:"
+    "react-router": "catalog:"
   },
   "peerDependencies": {
     "react": "catalog:",

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

@@ -11,11 +11,9 @@ import {
   getDocsVersionSearchTag,
   useDocsVersion,
 } from '@docusaurus/plugin-content-docs/client';
-import renderRoutes from '@docusaurus/renderRoutes';
+import {Outlet} from '@docusaurus/router';
 import SearchMetadata from '@theme/SearchMetadata';
 
-import type {Props} from '@theme/DocVersionRoot';
-
 function DocVersionRootMetadata(): ReactNode {
   const version = useDocsVersion();
   return (
@@ -31,19 +29,19 @@ function DocVersionRootMetadata(): ReactNode {
   );
 }
 
-function DocVersionRootContent(props: Props): ReactNode {
+function DocVersionRootContent(): ReactNode {
   const version = useDocsVersion();
   return (
     <HtmlClassNameProvider className={version.className}>
-      {renderRoutes(props.route.routes!)}
+      <Outlet />
     </HtmlClassNameProvider>
   );
 }
-export default function DocVersionRoot(props: Props): ReactNode {
+export default function DocVersionRoot(): ReactNode {
   return (
     <>
       <DocVersionRootMetadata />
-      <DocVersionRootContent {...props} />
+      <DocVersionRootContent />
     </>
   );
 }

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

@@ -6,11 +6,13 @@
  */
 
 import type {ReactNode} from 'react';
-import renderRoutes from '@docusaurus/renderRoutes';
+import {Outlet} from '@docusaurus/router';
 import Layout from '@theme/Layout';
 
-import type {Props} from '@theme/DocsRoot';
-
-export default function DocsRoot(props: Props): ReactNode {
-  return <Layout>{renderRoutes(props.route.routes!)}</Layout>;
+export default function DocsRoot(): ReactNode {
+  return (
+    <Layout>
+      <Outlet />
+    </Layout>
+  );
 }

packages/docusaurus-theme-classic/src/theme/Tabs/__tests__/index.test.tsx

@@ -10,7 +10,7 @@ import type {PropsWithChildren, ReactNode} from 'react';
 import {render} from '@testing-library/react';
 import '@testing-library/jest-dom/vitest';
 import {ScrollControllerProvider} from '@docusaurus/theme-common/internal';
-import {StaticRouter} from 'react-router-dom';
+import {StaticRouter} from 'react-router';
 import Tabs from '../index';
 import TabItem from '../../TabItem';
 

packages/docusaurus-theme-common/package.json

@@ -34,9 +34,7 @@
     "@docusaurus/module-type-aliases": "workspace:*",
     "@docusaurus/utils": "workspace:*",
     "@docusaurus/utils-common": "workspace:*",
-    "@types/history": "catalog:",
     "@types/react": "19.3.0",
-    "@types/react-router-config": "catalog:",
     "clsx": "catalog:",
     "parse-numeric-range": "catalog:",
     "prism-react-renderer": "catalog:",
@@ -47,9 +45,8 @@
     "@docusaurus/core": "workspace:*",
     "@docusaurus/types": "workspace:*",
     "@total-typescript/shoehorn": "catalog:dev",
-    "@types/react-router-dom": "catalog:",
     "lodash": "catalog:",
-    "react-router-dom": "catalog:"
+    "react-router": "catalog:"
   },
   "peerDependencies": {
     "react": "catalog:",