react-router-dom 6.30.4: BrowserRouter

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.BrowserRouter 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.BrowserRouter
Required runtime conditions:
  - ecosystem: golang
  - language: go
  - packageManager: go@1.26.6
  - runtime: go@1.26.6

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:7ddd1f79e9344540f38ff29ed86f2ca3b06f4790e11833811a25b0a38c6429c4","contract":["BrowserRouter routes requests based on window location and renders matching Route elements","BrowserRouter supports basename prefix and resolves relative routes within that base path","BrowserRouter renders Link elements that generate correct href attributes with and without basename","BrowserRouter renders nested route hierarchies and nested Outlet content","BrowserRouter matches wildcard fallback route when no specific route path matches"],"goal":"verify react-router-dom.BrowserRouter 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.BrowserRouter"]},"contractCommand":["node","test/contract.mjs"],"environment":{"arch":"x64","distro":"ubuntu","ecosystem":"npm","libc":"glibc","libcVersion":"2.39","os":"linux","osVersionBucket":"24","packageManager":"npm","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.BrowserRouter"],"verifierAdapter":"node-typescript@1"}

{
  "name": "react-router-dom-browser-router-sample",
  "version": "1.0.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "react-router-dom-browser-router-sample",
      "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": "react-router-dom-browser-router-sample",
  "version": "1.0.0",
  "description": "verify react-router-dom.BrowserRouter in pkg:npm/react-router-dom@6.30.4",
  "type": "module",
  "main": "src/index.mjs",
  "scripts": {
    "test": "node test/contract.mjs"
  },
  "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.BrowserRouter in pkg:npm/react-router-dom@6.30.4",
  "kind": "HOW",
  "packages": [
    "pkg:npm/react-router-dom@6.30.4"
  ],
  "symbols": [
    "react-router-dom.BrowserRouter"
  ],
  "runtimeConditions": {
    "ecosystem": "golang",
    "language": "go",
    "packageManager": "go@1.26.6",
    "runtime": "go@1.26.6"
  }
}

import React from 'react';
import { renderToStaticMarkup } from 'react-dom/server';
import { BrowserRouter, Routes, Route, Link, Outlet } from 'react-router-dom';

/**
 * Creates a mock window object suitable for rendering BrowserRouter in server/testing environments.
 *
 * @param {string} initialUrl - Full URL to initialize the mock window location (e.g. 'http://localhost/users').
 * @returns {object} Mock window object containing location, history, and DOM stubs.
 */
export function createMockBrowserWindow(initialUrl = 'http://localhost/') {
  const url = new URL(initialUrl);
  return {
    document: {},
    location: {
      origin: url.origin,
      href: url.href,
      protocol: url.protocol,
      host: url.host,
      hostname: url.hostname,
      port: url.port,
      pathname: url.pathname,
      search: url.search,
      hash: url.hash,
      state: null,
    },
    history: {
      state: null,
      pushState(state, title, url) {},
      replaceState(state, title, url) {},
    },
    addEventListener(event, handler) {},
    removeEventListener(event, handler) {},
  };
}

/**
 * Renders a React component tree wrapped in BrowserRouter to a static HTML string.
 *
 * @param {import('react').ReactNode} children - React elements to render inside BrowserRouter.
 * @param {object} [options={}] - Options for BrowserRouter.
 * @param {string} [options.basename] - The base URL prefix for all locations.
 * @param {object} [options.window] - Custom window object (useful for SSR/testing).
 * @returns {string} Static HTML markup.
 */
export function renderWithBrowserRouter(children, options = {}) {
  const element = React.createElement(
    BrowserRouter,
    {
      basename: options.basename,
      window: options.window,
    },
    children
  );
  return renderToStaticMarkup(element);
}

/**
 * Helper component rendering navigation links.
 *
 * @param {object} props
 * @param {Array<{ to: string, label: string }>} props.items - Array of route link items.
 * @returns {import('react').ReactElement}
 */
export function NavigationBar({ items }) {
  return React.createElement(
    'nav',
    { className: 'main-nav' },
    items.map((item, index) =>
      React.createElement(Link, { key: index, to: item.to }, item.label)
    )
  );
}

/**
 * Helper layout component with an Outlet for nested routes.
 *
 * @param {object} props
 * @param {string} props.title - Layout header title.
 * @returns {import('react').ReactElement}
 */
export function LayoutWithOutlet({ title }) {
  return React.createElement(
    'div',
    { className: 'layout-container' },
    React.createElement('header', null, React.createElement('h1', null, title)),
    React.createElement('section', { className: 'content' }, React.createElement(Outlet, null))
  );
}

import assert from 'node:assert/strict';
import React from 'react';
import { Routes, Route, Link } from 'react-router-dom';
import {
  createMockBrowserWindow,
  renderWithBrowserRouter,
  NavigationBar,
  LayoutWithOutlet,
} from '../src/index.mjs';

// Contract 1: BrowserRouter routes requests based on window location and renders matching Route elements
{
  const mockWin = createMockBrowserWindow('http://localhost/items');
  const routes = React.createElement(
    Routes,
    null,
    React.createElement(Route, {
      path: '/',
      element: React.createElement('h1', null, 'Home Page'),
    }),
    React.createElement(Route, {
      path: '/items',
      element: React.createElement('h1', null, 'Items List'),
    })
  );

  const html = renderWithBrowserRouter(routes, { window: mockWin });
  assert.strictEqual(
    html,
    '<h1>Items List</h1>',
    'BrowserRouter must match and render route corresponding to window location pathname'
  );
}

// Contract 2: BrowserRouter supports basename prefix and resolves relative routes within that base path
{
  const mockWin = createMockBrowserWindow('http://localhost/app/dashboard');
  const routes = React.createElement(
    Routes,
    null,
    React.createElement(Route, {
      path: '/dashboard',
      element: React.createElement('div', { id: 'dashboard-view' }, 'Dashboard Panel'),
    })
  );

  const html = renderWithBrowserRouter(routes, {
    basename: '/app',
    window: mockWin,
  });
  assert.strictEqual(
    html,
    '<div id="dashboard-view">Dashboard Panel</div>',
    'BrowserRouter must match subpaths relative to basename'
  );
}

// Contract 3: BrowserRouter renders Link elements that generate correct href attributes with and without basename
{
  const mockWin = createMockBrowserWindow('http://localhost/app');
  const navItems = [
    { to: '/overview', label: 'Overview' },
    { to: '/settings', label: 'Settings' },
  ];

  const html = renderWithBrowserRouter(
    React.createElement(NavigationBar, { items: navItems }),
    { basename: '/app', window: mockWin }
  );

  assert.strictEqual(
    html,
    '<nav class="main-nav"><a href="/app/overview">Overview</a><a href="/app/settings">Settings</a></nav>',
    'Link components inside BrowserRouter must include basename in href attribute'
  );
}

// Contract 4: BrowserRouter renders nested route hierarchies and nested Outlet content
{
  const mockWin = createMockBrowserWindow('http://localhost/admin/users');
  const routes = React.createElement(
    Routes,
    null,
    React.createElement(
      Route,
      {
        path: '/admin',
        element: React.createElement(LayoutWithOutlet, { title: 'Admin Console' }),
      },
      React.createElement(Route, {
        path: 'users',
        element: React.createElement('p', null, 'Manage Users'),
      })
    )
  );

  const html = renderWithBrowserRouter(routes, { window: mockWin });
  assert.strictEqual(
    html,
    '<div class="layout-container"><header><h1>Admin Console</h1></header><section class="content"><p>Manage Users</p></section></div>',
    'BrowserRouter must render nested routes through Outlet component'
  );
}

// Contract 5: BrowserRouter matches wildcard fallback route when no specific route path matches
{
  const mockWin = createMockBrowserWindow('http://localhost/non-existent-page');
  const routes = React.createElement(
    Routes,
    null,
    React.createElement(Route, {
      path: '/',
      element: React.createElement('h1', null, 'Home'),
    }),
    React.createElement(Route, {
      path: '*',
      element: React.createElement('div', { role: 'alert' }, '404 - Not Found'),
    })
  );

  const html = renderWithBrowserRouter(routes, { window: mockWin });
  assert.strictEqual(
    html,
    '<div role="alert">404 - Not Found</div>',
    'BrowserRouter must render wildcard route when no other route matches'
  );
}

console.log('All react-router-dom.BrowserRouter contract tests passed successfully.');