tessl/npm-react-router-dom

Declarative routing for React web applications

—

Pending

Overview

Eval results

Files

Router Components

Name: tessl/npm-react-router-dom
Author: tessl

Core router components for setting up routing in React applications, providing the foundation for client-side navigation and route rendering.

Capabilities

BrowserRouter

Uses HTML5 history API for clean URLs without hash symbols.

/**
 * Router that uses HTML5 history API for navigation
 * @param props - BrowserRouter configuration options
 * @returns Router component for browser-based routing
 */
function BrowserRouter(props: BrowserRouterProps): JSX.Element;

interface BrowserRouterProps {
  /** Base URL for all locations. Useful for sub-directory deployments */
  basename?: string;
  /** React children to render inside the router */
  children?: React.ReactNode;
  /** Window object to use for history (useful for testing) */
  window?: Window;
}

Usage Example:

import { BrowserRouter, Routes, Route } from "react-router-dom";

function App() {
  return (
    <BrowserRouter basename="/my-app">
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

HashRouter

Uses hash portion of URL for routing, compatible with older browsers and static file servers.

/**
 * Router that uses hash-based routing for compatibility
 * @param props - HashRouter configuration options
 * @returns Router component using hash-based navigation
 */
function HashRouter(props: HashRouterProps): JSX.Element;

interface HashRouterProps {
  /** Base URL for all locations */
  basename?: string;
  /** React children to render inside the router */
  children?: React.ReactNode;
  /** Window object to use for history */
  window?: Window;
}

MemoryRouter

Keeps history in memory, perfect for testing and non-browser environments.

/**
 * Router that stores location in memory, ideal for testing
 * @param props - MemoryRouter configuration options
 * @returns Router component with in-memory navigation
 */
function MemoryRouter(props: MemoryRouterProps): JSX.Element;

interface MemoryRouterProps {
  /** Base URL for all locations */
  basename?: string;
  /** React children to render inside the router */
  children?: React.ReactNode;
  /** Initial entries in the history stack */
  initialEntries?: InitialEntry[];
  /** Initial index in the history stack */
  initialIndex?: number;
}

type InitialEntry = string | Partial<Location>;

Router

Low-level router component that accepts a history instance directly.

/**
 * Low-level router component accepting custom history
 * @param props - Router configuration with history instance
 * @returns Base router component
 */
function Router(props: RouterProps): JSX.Element;

interface RouterProps {
  /** Base URL for all locations */
  basename?: string;
  /** React children to render inside the router */
  children?: React.ReactNode;
  /** History instance to use for navigation */
  location: Partial<Location> | string;
  /** Navigation function */
  navigationType?: NavigationType;
  /** Navigator instance */
  navigator: Navigator;
  /** Static mode flag */
  static?: boolean;
}

interface Navigator {
  createHref: (to: To) => string;
  push: (to: To, state?: any) => void;
  replace: (to: To, state?: any) => void;
  go: (delta: number) => void;
  back: () => void;
  forward: () => void;
}

RouterProvider

High-level router component that works with router instances created by createBrowserRouter and similar functions.

/**
 * High-level router provider for data-enabled routers
 * @param props - RouterProvider configuration with router instance
 * @returns Router provider component with full feature support
 */
function RouterProvider(props: RouterProviderProps): JSX.Element;

interface RouterProviderProps {
  /** Data router instance created by createBrowserRouter or similar */
  router: DataRouter;
  /** Error handler for uncaught errors during rendering/loading */
  unstable_onError?: (error: any, errorInfo: React.ErrorInfo) => void;
}

interface DataRouter {
  /** Initialize the router and start listening to history */
  initialize(): void;
  /** Subscribe to router state changes */
  subscribe(fn: RouterSubscriber): () => void;
  /** Navigate to a new location */
  navigate(to: To, opts?: RouterNavigateOptions): Promise<void>;
  /** Current router state */
  state: RouterState;
  /** Dispose of the router and clean up listeners */
  dispose(): void;
}

Usage Example:

import { createBrowserRouter, RouterProvider } from "react-router-dom";

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    loader: rootLoader,
    children: [
      {
        path: "dashboard",
        element: <Dashboard />,
        loader: dashboardLoader,
      },
    ],
  },
]);

function App() {
  return <RouterProvider router={router} />;
}

HydratedRouter

Specialized router for React Server Components and framework-mode applications.

/**
 * Framework-mode router for hydrating from server state
 * @param props - HydratedRouter configuration options
 * @returns Hydrated router component for SSR applications
 */
function HydratedRouter(props: HydratedRouterProps): JSX.Element;

interface HydratedRouterProps {
  /** Context function for clientAction/clientLoader */
  unstable_getContext?: RouterInit["unstable_getContext"];
  /** Error handler for application errors */
  unstable_onError?: (error: any, errorInfo: React.ErrorInfo) => void;
}

interface RouterInit {
  unstable_getContext?: () => any;
}

Router Selection Guide

BrowserRouter: Default choice for modern web applications with clean URLs
HashRouter: Use when deploying to static file servers or need IE9 support
MemoryRouter: Perfect for testing, React Native, or non-DOM environments
RouterProvider: Use with createBrowserRouter for data loading features
HydratedRouter: Use in React Server Components or framework-mode applications
Router: Advanced use cases with custom history management