react-router-dom 6.30.4: RouterProvider

Clean-room public code sample — generation instructions

Write a brand-new, minimal, self-contained code sample in this clean-room directory.
Do not copy, paraphrase, or reference any existing project source. Work only from this spec.

A csx.json manifest scaffold already exists. Do not recreate it from memory. Preserve its case.goal, packages and symbols; fill its empty case.contract with exact assertions and correct its environment, commands and verifierAdapter for the files you generate.

Goal: verify RouterProvider in pkg:npm/react-router-dom@6.30.4
Kind: HOW

Use EXACTLY these public packages and versions:
  - pkg:npm/react-router-dom@6.30.4
Demonstrate these symbols/APIs:
  - RouterProvider

Rules:
  - One focused purpose; the smallest project that proves the goal.
  - Include a contract test (test/contract.*) that runs OFFLINE and exits 0 exactly when the goal behavior works.
  - Pin every dependency with a lockfile so resolution is reproducible.
  - No secrets, credentials, or tokens. No real URLs (only example.com or localhost). No absolute paths.
  - No personal names, emails, company names, or project identifiers of any kind.
  - No binaries and no generated output (node_modules, dist, target, venv, .git, .env).
  - Keep it under 200 files and 256KB packed.

{"case":{"caseId":"case:sha256:0f35a947af8e44db91cf5d395e3d720c5dd05bfeb9a5c45c34c4d099f97c9a28","contract":["RouterProvider renders matched route element for initial route location","RouterProvider renders nested routes within parent Outlet","RouterProvider provides route params accessible via useParams","RouterProvider renders catch-all wildcard route for unmatched paths","RouterProvider renders nested child element inside parent Outlet","RouterProvider accepts optional fallbackElement prop","RouterProvider throws TypeError when router prop is undefined"],"goal":"verify RouterProvider in pkg:npm/react-router-dom@6.30.4","kind":"HOW","packages":["pkg:npm/react-router-dom@6.30.4"],"schemaVersion":1,"symbols":["RouterProvider"]},"contractCommand":["node","test/contract.mjs"],"environment":{"arch":"x64","distro":"ubuntu","ecosystem":"npm","executionContext":"node","language":"javascript","libc":"glibc","libcVersion":"2.39","moduleSystem":"cjs","os":"linux","osVersionBucket":"24","packageManager":"npm","packageManagerVersion":"10.9.8","runtime":"node","runtimeVersion":"22.23.2","schemaVersion":1},"license":"MIT-0","packages":["pkg:npm/react-router-dom@6.30.4"],"schemaVersion":1,"subject":"pkg:npm/react-router-dom@6.30.4","symbols":["RouterProvider"],"verifierAdapter":"node-typescript@1"}

{
  "name": "sample-react-router-dom-routerprovider",
  "version": "1.0.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "sample-react-router-dom-routerprovider",
      "version": "1.0.0",
      "dependencies": {
        "react": "^18.3.1",
        "react-dom": "^18.3.1",
        "react-router-dom": "6.30.4"
      }
    },
    "node_modules/@remix-run/router": {
      "version": "1.23.3",
      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.23.3.tgz",
      "integrity": "sha512-4An71tdz9X8+3sI4Qqqd2LWd9vS39J7sqd9EU4Scw7TJE/qB10Flv/UuqbPVgfQV9XoK8Np6jNquZitnZq5i+Q==",
      "license": "MIT",
      "engines": {
        "node": ">=14.0.0"
      }
    },
    "node_modules/js-tokens": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
      "license": "MIT"
    },
    "node_modules/loose-envify": {
      "version": "1.4.0",
      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
      "license": "MIT",
      "dependencies": {
        "js-tokens": "^3.0.0 || ^4.0.0"
      },
      "bin": {
        "loose-envify": "cli.js"
      }
    },
    "node_modules/react": {
      "version": "18.3.1",
      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
      "license": "MIT",
      "dependencies": {
        "loose-envify": "^1.1.0"
      },
      "engines": {
        "node": ">=0.10.0"
      }
    },
    "node_modules/react-dom": {
      "version": "18.3.1",
      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
      "license": "MIT",
      "dependencies": {
        "loose-envify": "^1.1.0",
        "scheduler": "^0.23.2"
      },
      "peerDependencies": {
        "react": "^18.3.1"
      }
    },
    "node_modules/react-router": {
      "version": "6.30.4",
      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.30.4.tgz",
      "integrity": "sha512-SVUsDe+DybHM/WmYKIVYhZh1o5Dcuf16yM6WjG02Q9XVFMZIJyHYhwrr6bFBXZkVP6z69kNkMyBCujt8FaFLJA==",
      "license": "MIT",
      "dependencies": {
        "@remix-run/router": "1.23.3"
      },
      "engines": {
        "node": ">=14.0.0"
      },
      "peerDependencies": {
        "react": ">=16.8"
      }
    },
    "node_modules/react-router-dom": {
      "version": "6.30.4",
      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.30.4.tgz",
      "integrity": "sha512-q4HvNl+mmDdkS0g+MqiBZNteQJCuimWoOyHMy4T/RQLAn9Z29+E91QXRaxOujeMl2HTzRSS0KFPd7lxX3PjV0Q==",
      "license": "MIT",
      "dependencies": {
        "@remix-run/router": "1.23.3",
        "react-router": "6.30.4"
      },
      "engines": {
        "node": ">=14.0.0"
      },
      "peerDependencies": {
        "react": ">=16.8",
        "react-dom": ">=16.8"
      }
    },
    "node_modules/scheduler": {
      "version": "0.23.2",
      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
      "license": "MIT",
      "dependencies": {
        "loose-envify": "^1.1.0"
      }
    }
  }
}

{
  "name": "sample-react-router-dom-routerprovider",
  "version": "1.0.0",
  "type": "module",
  "private": true,
  "dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-router-dom": "6.30.4"
  }
}

{
  "schemaVersion": 1,
  "goal": "verify RouterProvider in pkg:npm/react-router-dom@6.30.4",
  "kind": "HOW",
  "packages": [
    "pkg:npm/react-router-dom@6.30.4"
  ],
  "symbols": [
    "RouterProvider"
  ]
}

import React from "react";
import {
  RouterProvider,
  createMemoryRouter,
  Outlet,
  useParams,
  useRouteError,
  Link
} from "react-router-dom";

export function RootLayout() {
  return React.createElement(
    "div",
    { className: "root-layout" },
    React.createElement("header", null, "App Header"),
    React.createElement("nav", null,
      React.createElement(Link, { to: "/" }, "Home"),
      React.createElement(Link, { to: "/items" }, "Items")
    ),
    React.createElement("main", null, React.createElement(Outlet, null))
  );
}

export function ItemDetail() {
  const { id } = useParams();
  return React.createElement("div", { className: "item-detail" }, `Item ID: ${id}`);
}

export function ItemList() {
  return React.createElement("div", { className: "item-list" }, "Items List");
}

export function ErrorBoundaryView() {
  const error = useRouteError();
  return React.createElement(
    "div",
    { className: "error-boundary" },
    `Error caught: ${error?.message || error || "Unknown"}`
  );
}

export function NotFoundView() {
  return React.createElement("div", { className: "not-found" }, "404 Not Found");
}

export function createAppRouter(initialEntries = ["/"]) {
  const routes = [
    {
      path: "/",
      element: React.createElement(RootLayout, null),
      errorElement: React.createElement(ErrorBoundaryView, null),
      children: [
        {
          index: true,
          element: React.createElement("div", { className: "home-view" }, "Home Page Content")
        },
        {
          path: "items",
          element: React.createElement(Outlet, null),
          children: [
            {
              index: true,
              element: React.createElement(ItemList, null)
            },
            {
              path: ":id",
              element: React.createElement(ItemDetail, null)
            }
          ]
        },
        {
          path: "*",
          element: React.createElement(NotFoundView, null)
        }
      ]
    }
  ];

  return createMemoryRouter(routes, { initialEntries });
}

export function App({ router }) {
  return React.createElement(RouterProvider, { router });
}

import assert from "node:assert";
import React from "react";
import { renderToString } from "react-dom/server";
import { RouterProvider, createMemoryRouter, Outlet, useParams } from "react-router-dom";
import { App, createAppRouter, RootLayout, ItemDetail, ItemList, NotFoundView } from "../src/index.mjs";

// 1. RouterProvider renders matched route element for initial route location
{
  const router = createAppRouter(["/"]);
  const html = renderToString(React.createElement(App, { router }));
  assert(html.includes("Home Page Content"), "RouterProvider must render index route content at /");
  assert(html.includes("App Header"), "RouterProvider must render RootLayout parent container");
}

// 2. RouterProvider renders nested routes within parent Outlet
{
  const router = createAppRouter(["/items"]);
  const html = renderToString(React.createElement(App, { router }));
  assert(html.includes("Items List"), "RouterProvider must render nested ItemList at /items");
  assert(html.includes("App Header"), "RootLayout must wrap nested route content");
}

// 3. RouterProvider provides route params accessible via useParams
{
  const router = createAppRouter(["/items/99"]);
  const html = renderToString(React.createElement(App, { router }));
  assert(html.includes("Item ID: 99"), "RouterProvider must supply dynamic params to useParams");
}

// 4. RouterProvider renders catch-all wildcard route for unmatched paths
{
  const router = createAppRouter(["/unmatched-unknown-path"]);
  const html = renderToString(React.createElement(App, { router }));
  assert(html.includes("404 Not Found"), "RouterProvider must render wildcard route for unmatched paths");
}

// 5. RouterProvider renders nested child element inside parent Outlet
{
  function Parent() {
    return React.createElement("div", { id: "parent" }, React.createElement(Outlet, null));
  }
  function Child() {
    return React.createElement("span", { id: "child" }, "Child Content");
  }

  const router = createMemoryRouter([
    {
      path: "/container",
      element: React.createElement(Parent, null),
      children: [
        {
          path: "child",
          element: React.createElement(Child, null)
        }
      ]
    }
  ], { initialEntries: ["/container/child"] });

  const html = renderToString(React.createElement(RouterProvider, { router }));
  assert(html.includes('<div id="parent"><span id="child">Child Content</span></div>'),
    "RouterProvider must render nested child element within parent Outlet");
}

// 6. RouterProvider accepts optional fallbackElement prop
{
  const router = createMemoryRouter([
    {
      path: "/",
      element: React.createElement("div", null, "Loaded Content")
    }
  ], { initialEntries: ["/"] });

  const fallback = React.createElement("div", { id: "fallback" }, "Loading...");
  const html = renderToString(React.createElement(RouterProvider, { router, fallbackElement: fallback }));
  assert(html.includes("Loaded Content"), "RouterProvider renders loaded content with fallbackElement specified");
}

// 7. RouterProvider throws TypeError when router prop is undefined
{
  assert.throws(() => {
    renderToString(React.createElement(RouterProvider, {}));
  }, /Cannot read properties of undefined/i,
    "RouterProvider must throw TypeError when router prop is undefined");
}

console.log("All react-router-dom RouterProvider contract assertions passed successfully.");