react-router-dom 6.30.4: Routes

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.Routes 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.Routes
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:6279df72606818f6daad695c745fdfa5d53e3f1c5c8d73a8ed7392cef891a06a","constraints":{"executionContext":"node"},"contract":["Routes selects and renders the matching child Route element for the current pathname location.","Routes renders the wildcard '*' Route fallback element when no specific route path matches the current location.","Routes renders nested child routes via parent Route layout element containing an Outlet component.","Routes passes URL parameters from dynamic path patterns to descendant components via useParams.","Routes accepts a location prop override to match against an explicit location instead of the router context location.","Routes renders null (empty markup) when no route matches and no wildcard fallback route is defined.","Routes throws an invariant error when rendered outside of a Router context."],"goal":"verify react-router-dom.Routes 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.Routes"]},"contractCommand":["node","test/contract.js"],"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.Routes"],"verifierAdapter":"node-typescript@1"}

{
  "name": "sample-react-router-dom-routes",
  "version": "1.0.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "sample-react-router-dom-routes",
      "version": "1.0.0",
      "license": "MIT-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-routes",
  "version": "1.0.0",
  "description": "verify react-router-dom.Routes in pkg:npm/react-router-dom@6.30.4",
  "main": "src/index.js",
  "scripts": {
    "test": "node test/contract.js"
  },
  "dependencies": {
    "react": "18.3.1",
    "react-dom": "18.3.1",
    "react-router-dom": "6.30.4"
  },
  "license": "MIT-0"
}

{
  "schemaVersion": 1,
  "goal": "verify react-router-dom.Routes in pkg:npm/react-router-dom@6.30.4",
  "kind": "HOW",
  "packages": [
    "pkg:npm/react-router-dom@6.30.4"
  ],
  "symbols": [
    "react-router-dom.Routes"
  ],
  "constraints": {
    "executionContext": "node"
  },
  "runtimeConditions": {
    "ecosystem": "npm",
    "language": "javascript",
    "moduleSystem": "cjs",
    "packageManager": "npm@10.9.8",
    "runtime": "node@22.23.2"
  }
}

const React = require('react');
const ReactDOMServer = require('react-dom/server');
const { Routes, Route, Outlet, useParams } = require('react-router-dom');
const { StaticRouter } = require('react-router-dom/server');

/**
 * Basic page components for route matching demonstration.
 */
function HomePage() {
  return React.createElement('div', { id: 'home' }, 'Home Page');
}

function AboutPage() {
  return React.createElement('div', { id: 'about' }, 'About Page');
}

function NotFoundPage() {
  return React.createElement('div', { id: 'not-found' }, 'Page Not Found');
}

/**
 * Nested layout component with an Outlet for child route elements.
 */
function MainLayout() {
  return React.createElement(
    'main',
    { id: 'layout' },
    React.createElement('header', null, 'Application Header'),
    React.createElement(Outlet, null)
  );
}

function DashboardPage() {
  return React.createElement('section', { id: 'dashboard' }, 'Dashboard Index');
}

function UserProfilePage() {
  const { username } = useParams();
  return React.createElement('span', { id: 'profile' }, `User: ${username}`);
}

/**
 * Renders a simple route hierarchy with static, named, and wildcard routes.
 *
 * @param {string} location - Target URL path.
 * @returns {string} Rendered HTML string.
 */
function renderSimpleRoutes(location) {
  const element = React.createElement(
    StaticRouter,
    { location },
    React.createElement(
      Routes,
      null,
      React.createElement(Route, { path: '/', element: React.createElement(HomePage) }),
      React.createElement(Route, { path: '/about', element: React.createElement(AboutPage) }),
      React.createElement(Route, { path: '*', element: React.createElement(NotFoundPage) })
    )
  );
  return ReactDOMServer.renderToStaticMarkup(element);
}

/**
 * Renders a nested route tree with layout, index route, and parameterized child routes.
 *
 * @param {string} location - Target URL path.
 * @returns {string} Rendered HTML string.
 */
function renderNestedRoutes(location) {
  const element = React.createElement(
    StaticRouter,
    { location },
    React.createElement(
      Routes,
      null,
      React.createElement(
        Route,
        { path: '/app', element: React.createElement(MainLayout) },
        React.createElement(Route, { index: true, element: React.createElement(DashboardPage) }),
        React.createElement(Route, { path: 'users/:username', element: React.createElement(UserProfilePage) })
      )
    )
  );
  return ReactDOMServer.renderToStaticMarkup(element);
}

/**
 * Renders Routes with an explicit location prop override.
 *
 * @param {string} routerLocation - Base router location.
 * @param {string} overrideLocation - Location prop passed to Routes.
 * @returns {string} Rendered HTML string.
 */
function renderWithLocationOverride(routerLocation, overrideLocation) {
  const element = React.createElement(
    StaticRouter,
    { location: routerLocation },
    React.createElement(
      Routes,
      { location: overrideLocation },
      React.createElement(Route, { path: '/', element: React.createElement(HomePage) }),
      React.createElement(Route, { path: '/about', element: React.createElement(AboutPage) })
    )
  );
  return ReactDOMServer.renderToStaticMarkup(element);
}

/**
 * Renders Routes without a fallback wildcard route.
 *
 * @param {string} location - Target URL path.
 * @returns {string} Rendered HTML string (empty if unmatched).
 */
function renderWithoutWildcard(location) {
  const element = React.createElement(
    StaticRouter,
    { location },
    React.createElement(
      Routes,
      null,
      React.createElement(Route, { path: '/home', element: React.createElement(HomePage) })
    )
  );
  return ReactDOMServer.renderToStaticMarkup(element);
}

/**
 * Attempts to render Routes without an enclosing Router provider.
 * Throws an invariant error.
 */
function renderRoutesWithoutRouter() {
  const element = React.createElement(
    Routes,
    null,
    React.createElement(Route, { path: '/', element: React.createElement(HomePage) })
  );
  return ReactDOMServer.renderToStaticMarkup(element);
}

module.exports = {
  renderSimpleRoutes,
  renderNestedRoutes,
  renderWithLocationOverride,
  renderWithoutWildcard,
  renderRoutesWithoutRouter,
  HomePage,
  AboutPage,
  NotFoundPage,
  MainLayout,
  DashboardPage,
  UserProfilePage
};

const assert = require('assert');
const {
  renderSimpleRoutes,
  renderNestedRoutes,
  renderWithLocationOverride,
  renderWithoutWildcard,
  renderRoutesWithoutRouter
} = require('../src/index');

// 1. Routes selects and renders the matching child Route element for the current pathname location
{
  const htmlHome = renderSimpleRoutes('/');
  assert.strictEqual(htmlHome, '<div id="home">Home Page</div>', 'Routes must render home route when location is /');

  const htmlAbout = renderSimpleRoutes('/about');
  assert.strictEqual(htmlAbout, '<div id="about">About Page</div>', 'Routes must render about route when location is /about');
}

// 2. Routes renders the wildcard '*' Route fallback element when no specific route path matches the current location
{
  const htmlNotFound = renderSimpleRoutes('/unknown/path');
  assert.strictEqual(htmlNotFound, '<div id="not-found">Page Not Found</div>', 'Routes must render fallback wildcard route for unmatched paths');
}

// 3. Routes renders nested child routes via parent Route layout element containing an Outlet component
{
  const htmlIndex = renderNestedRoutes('/app');
  assert.strictEqual(
    htmlIndex,
    '<main id="layout"><header>Application Header</header><section id="dashboard">Dashboard Index</section></main>',
    'Routes must render parent layout and nested index route'
  );
}

// 4. Routes passes URL parameters from dynamic path patterns to descendant components via useParams
{
  const htmlProfile = renderNestedRoutes('/app/users/alice');
  assert.strictEqual(
    htmlProfile,
    '<main id="layout"><header>Application Header</header><span id="profile">User: alice</span></main>',
    'Routes must resolve dynamic parameters and provide them to child components'
  );
}

// 5. Routes accepts a location prop override to match against an explicit location instead of the router context location
{
  const htmlOverride = renderWithLocationOverride('/', '/about');
  assert.strictEqual(
    htmlOverride,
    '<div id="about">About Page</div>',
    'Routes must prioritize explicit location prop over router current location'
  );
}

// 6. Routes renders null (empty markup) when no route matches and no wildcard fallback route is defined
{
  const htmlEmpty = renderWithoutWildcard('/unmatched');
  assert.strictEqual(htmlEmpty, '', 'Routes must render empty markup when no route matches');
}

// 7. Routes throws an invariant error when rendered outside of a Router context
{
  assert.throws(
    () => {
      renderRoutesWithoutRouter();
    },
    (err) => {
      return err instanceof Error && /useRoutes\(\) may be used only in the context of a <Router> component/.test(err.message);
    },
    'Routes rendered outside Router must throw invariant error'
  );
}

console.log('All react-router-dom.Routes contract assertions passed successfully.');