react-router-dom 6.30.4: Route

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 react-router-dom.Route 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:
  - react-router-dom.Route
Constraints:
  - executionContext: node
Required runtime conditions:
  - ecosystem: npm
  - language: javascript
  - moduleSystem: cjs
  - packageManager: npm@10.9.8
  - runtime: node@22.23.2

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:e5580fa1ebc01664f68e961de976035024cbe96de2344a1382155d23a9c62ebc","constraints":{"executionContext":"node"},"contract":["Route renders element matching path inside Routes","Route with index prop renders for parent path without subpath","Route with dynamic parameter extracts parameter via useParams","Route with wildcard path matches unmatched routes","Nested Route renders child element inside parent Outlet","Route throws an error when rendered directly outside of Routes"],"goal":"verify react-router-dom.Route in pkg:npm/react-router-dom@6.30.4","kind":"HOW","packages":["pkg:npm/react-router-dom@6.30.4"],"schemaVersion":1,"symbols":["react-router-dom.Route"]},"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":["react-router-dom.Route"],"verifierAdapter":"node-typescript@1"}

{
  "name": "sample-react-router-dom-route",
  "version": "1.0.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "sample-react-router-dom-route",
      "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-route",
  "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 react-router-dom.Route in pkg:npm/react-router-dom@6.30.4",
  "kind": "HOW",
  "packages": [
    "pkg:npm/react-router-dom@6.30.4"
  ],
  "symbols": [
    "react-router-dom.Route"
  ],
  "constraints": {
    "executionContext": "node"
  },
  "runtimeConditions": {
    "ecosystem": "npm",
    "language": "javascript",
    "moduleSystem": "cjs",
    "packageManager": "npm@10.9.8",
    "runtime": "node@22.23.2"
  }
}

import React from "react";
import { MemoryRouter, Routes, Route, Outlet, useParams } from "react-router-dom";

export function UserProfile() {
  const { id } = useParams();
  return React.createElement("div", { className: "user-profile" }, `User ID: ${id}`);
}

export function UserList() {
  return React.createElement("div", { className: "user-list" }, "User List");
}

export function Layout() {
  return React.createElement(
    "div",
    { className: "layout" },
    React.createElement("header", null, "Header"),
    React.createElement("main", null, React.createElement(Outlet, null))
  );
}

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

export function App({ initialEntry = "/" }) {
  return React.createElement(
    MemoryRouter,
    { initialEntries: [initialEntry] },
    React.createElement(
      Routes,
      null,
      React.createElement(
        Route,
        { path: "/", element: React.createElement(Layout, null) },
        React.createElement(Route, { index: true, element: React.createElement("div", null, "Home Page") }),
        React.createElement(
          Route,
          { path: "users", element: React.createElement(Outlet, null) },
          React.createElement(Route, { index: true, element: React.createElement(UserList, null) }),
          React.createElement(Route, { path: ":id", element: React.createElement(UserProfile, null) })
        ),
        React.createElement(Route, { path: "*", element: React.createElement(NotFound, null) })
      )
    )
  );
}

import assert from "node:assert";
import React from "react";
import { renderToString } from "react-dom/server";
import { MemoryRouter, Routes, Route, Outlet, useParams } from "react-router-dom";
import { App, UserProfile, UserList, Layout, NotFound } from "../src/index.mjs";

// 1. Route renders element matching path
{
  const html = renderToString(React.createElement(App, { initialEntry: "/" }));
  assert(html.includes("Home Page"), "Route with index:true must render Home Page at /");
  assert(html.includes("<header>Header</header>"), "Parent Route layout must be rendered");
}

// 2. Route with index inside nested Route
{
  const html = renderToString(React.createElement(App, { initialEntry: "/users" }));
  assert(html.includes("User List"), "Nested index Route must render User List at /users");
}

// 3. Route with dynamic parameter (:id) extracts parameter via useParams
{
  const html = renderToString(React.createElement(App, { initialEntry: "/users/42" }));
  assert(html.includes("User ID: 42"), "Dynamic parameter Route must match and supply params");
}

// 4. Route with wildcard catch-all path="*" matches unmatched routes
{
  const html = renderToString(React.createElement(App, { initialEntry: "/non-existent-page" }));
  assert(html.includes("Not Found"), "Wildcard Route must match unmatched URL");
}

// 5. Nested Route renders 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 html = renderToString(
    React.createElement(MemoryRouter, { initialEntries: ["/parent/child"] },
      React.createElement(Routes, null,
        React.createElement(Route, { path: "parent", element: React.createElement(Parent, null) },
          React.createElement(Route, { path: "child", element: React.createElement(Child, null) })
        )
      )
    )
  );
  assert(html.includes('<div id="parent"><span id="child">Child Content</span></div>'),
    "Nested Route must render inside parent Outlet");
}

// 6. Route rendered directly outside of Routes throws an error
{
  assert.throws(() => {
    renderToString(React.createElement(Route, { path: "/alone", element: React.createElement("div", null, "Alone") }));
  }, /A <Route> is only ever to be used as the child of <Routes> element/i,
    "Route rendered directly outside Routes must throw an error");
}

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