or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

data-loading-hooks.mdindex.mdnavigation-components.mdnavigation-hooks.mdroute-configuration.mdrouter-components.mdrouter-creation.mdserver-side-rendering.mdutilities.md
tile.json

tessl/npm-react-router-dom

Declarative routing for React web applications

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/react-router-dom@7.8.x

To install, run

npx @tessl/cli install tessl/npm-react-router-dom@7.8.0

index.mddocs/

React Router DOM

React Router DOM is a compatibility package that serves as a migration bridge from React Router v6 to v7, providing a smooth upgrade path for web applications. This package primarily re-exports all functionality from the core react-router library while adding DOM-specific components like RouterProvider and HydratedRouter.

Package Information

  • Package Name: react-router-dom
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install react-router-dom

Core Imports

import { 
  BrowserRouter, 
  Routes, 
  Route, 
  Link, 
  useNavigate, 
  useLocation,
  RouterProvider 
} from "react-router-dom";

For CommonJS:

const { 
  BrowserRouter, 
  Routes, 
  Route, 
  Link, 
  useNavigate, 
  useLocation 
} = require("react-router-dom");

Basic Usage

import React from "react";
import {
  BrowserRouter,
  Routes,
  Route,
  Link,
  useNavigate,
  useParams
} from "react-router-dom";

// Basic routing setup
function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
        <Link to="/users/123">User Profile</Link>
      </nav>
      
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/users/:id" element={<UserProfile />} />
      </Routes>
    </BrowserRouter>
  );
}

// Component using hooks
function UserProfile() {
  const { id } = useParams();
  const navigate = useNavigate();
  
  const handleBack = () => navigate(-1);
  
  return (
    <div>
      <h1>User Profile: {id}</h1>
      <button onClick={handleBack}>Go Back</button>
    </div>
  );
}

Architecture

React Router DOM is built around several key architectural patterns:

  • Component-Based Routing: Uses React components (Route, Routes) to declare routes declaratively
  • Re-export Layer: Acts as a compatibility wrapper that re-exports the entire react-router API
  • DOM Integration: Provides DOM-specific router components with React DOM integration
  • Hook-Based API: Extensive hook system for accessing routing state and navigation
  • Data Loading: Integrated data loading with loaders and actions for route-level data management
  • Server-Side Rendering: Full SSR support with hydration and static generation capabilities

Capabilities

Router Components

Core router components for setting up routing in React applications, including browser-based routing, memory routing for testing, and static routing for SSR.

function BrowserRouter(props: BrowserRouterProps): JSX.Element;
function HashRouter(props: HashRouterProps): JSX.Element;
function MemoryRouter(props: MemoryRouterProps): JSX.Element;
function Router(props: RouterProps): JSX.Element;
function RouterProvider(props: RouterProviderProps): JSX.Element;

interface BrowserRouterProps {
  basename?: string;
  children?: React.ReactNode;
  window?: Window;
}

interface RouterProviderProps {
  router: DataRouter;
  unstable_onError?: (error: any, errorInfo: React.ErrorInfo) => void;
}

Router Components

Route Configuration

Route definition components and utilities for declaring application routes with support for nested routing, dynamic segments, and route data loading.

function Routes(props: RoutesProps): JSX.Element;
function Route(props: RouteProps): JSX.Element;
function Outlet(props: OutletProps): JSX.Element;

interface RouteProps {
  path?: string;
  element?: React.ReactNode;
  children?: React.ReactNode;
  loader?: LoaderFunction;
  action?: ActionFunction;
  errorElement?: React.ReactNode;
  shouldRevalidate?: ShouldRevalidateFunction;
}

interface LoaderFunctionArgs {
  request: Request;
  params: Params;
  context?: any;
}

interface ActionFunctionArgs {
  request: Request;
  params: Params;
  context?: any;
}

Route Configuration

Navigation Components

Components for creating navigation interfaces including links, forms, and programmatic navigation with support for active states and form handling.

function Link(props: LinkProps): JSX.Element;
function NavLink(props: NavLinkProps): JSX.Element;
function Navigate(props: NavigateProps): JSX.Element;
function Form(props: FormProps): JSX.Element;

interface LinkProps {
  to: To;
  children?: React.ReactNode;
  replace?: boolean;
  state?: any;
  preventScrollReset?: boolean;
  relative?: RelativeRoutingType;
}

interface NavLinkProps extends Omit<LinkProps, 'className' | 'style'> {
  className?: string | ((props: NavLinkRenderProps) => string);
  style?: React.CSSProperties | ((props: NavLinkRenderProps) => React.CSSProperties);
  end?: boolean;
  caseSensitive?: boolean;
}

Navigation Components

Navigation Hooks

Hooks for accessing routing state and performing navigation operations, including location access, parameter extraction, and programmatic navigation.

function useNavigate(): NavigateFunction;
function useLocation(): Location;
function useParams<K extends string = string>(): Readonly<Params<K>>;
function useSearchParams(defaultValue?: URLSearchParamsInit): [URLSearchParams, SetURLSearchParams];

interface NavigateFunction {
  (to: To, options?: NavigateOptions): void;
  (delta: number): void;
}

interface Location {
  pathname: string;
  search: string;
  hash: string;
  state: any;
  key: string;
}

Navigation Hooks

Data Loading Hooks

Hooks for accessing route data including loader data, action data, and data fetching utilities with support for revalidation and optimistic updates.

function useLoaderData<T = any>(): T;
function useActionData<T = any>(): T | undefined;
function useRouteLoaderData<T = any>(routeId: string): T | undefined;
function useFetcher<T = any>(): FetcherWithComponents<T>;
function useRevalidator(): Revalidator;

interface FetcherWithComponents<T> {
  Form: React.ComponentType<FetcherFormProps>;
  submit: FetcherSubmitFunction;
  load: (href: string) => void;
  data: T;
  formData?: FormData;
  state: "idle" | "loading" | "submitting";
}

Data Loading Hooks

Router Creation

Functions for creating router instances programmatically with support for data loading, static generation, and memory-based routing for testing.

function createBrowserRouter(
  routes: RouteObject[],
  opts?: DOMRouterOpts
): DataRouter;

function createHashRouter(
  routes: RouteObject[],
  opts?: DOMRouterOpts
): DataRouter;

function createMemoryRouter(
  routes: RouteObject[],
  opts?: MemoryRouterOpts
): DataRouter;

interface DOMRouterOpts {
  basename?: string;
  unstable_dataStrategy?: DataStrategyFunction;
  unstable_patchRoutesOnNavigation?: PatchRoutesOnNavigationFunction;
  future?: Partial<Future>;
  window?: Window;
}

Router Creation

Server-Side Rendering

Components and utilities for server-side rendering including static routing, data loading on the server, and hydration support.

function StaticRouter(props: StaticRouterProps): JSX.Element;
function StaticRouterProvider(props: StaticRouterProviderProps): JSX.Element;
function HydratedRouter(props: HydratedRouterProps): JSX.Element;

interface StaticRouterProps {
  basename?: string;
  children?: React.ReactNode;
  location: Partial<Location> | string;
}

interface HydratedRouterProps {
  unstable_getContext?: RouterInit["unstable_getContext"];
  unstable_onError?: (error: any, errorInfo: React.ErrorInfo) => void;
}

Server-Side Rendering

Utilities

Path manipulation utilities, route matching functions, and data response helpers for advanced routing scenarios.

function generatePath<T extends Record<string, any>>(
  path: string,
  params?: T
): string;

function matchPath<T extends Record<string, any>>(
  pattern: PathPattern | string,
  pathname: string
): PathMatch<T> | null;

function resolvePath(to: To, fromPathname?: string): Path;

function redirect(url: string, init?: number | ResponseInit): Response;
function data<T>(data: T, init?: number | ResponseInit): Response;

Utilities

Types

Core Types

type To = string | Partial<Path>;

interface Path {
  pathname: string;
  search: string;
  hash: string;
}

interface Params<K extends string = string> {
  readonly [key in K]: string | undefined;
}

type NavigationType = "POP" | "PUSH" | "REPLACE";

type RelativeRoutingType = "route" | "path";

Route Types

interface RouteObject {
  path?: string;
  index?: boolean;
  children?: RouteObject[];
  caseSensitive?: boolean;
  id?: string;
  loader?: LoaderFunction;
  action?: ActionFunction;
  element?: React.ReactNode | null;
  errorElement?: React.ReactNode | null;
  shouldRevalidate?: ShouldRevalidateFunction;
}

interface DataRouteObject extends RouteObject {
  children?: DataRouteObject[];
  id: string;
}

type LoaderFunction = (args: LoaderFunctionArgs) => 
  | Promise<Response> 
  | Response 
  | Promise<any> 
  | any;

type ActionFunction = (args: ActionFunctionArgs) => 
  | Promise<Response> 
  | Response 
  | Promise<any> 
  | any;

Router Types

interface DataRouter {
  initialize(): void;
  subscribe(subscriber: RouterSubscriber): () => void;
  navigate(to: To, opts?: RouterNavigateOptions): Promise<void>;
  fetch(key: string, routeId: string, href: string): Promise<void>;
  revalidate(): void;
  getRouteData(routeId: string): any;
  dispose(): void;
  state: RouterState;
}

interface RouterState {
  historyAction: NavigationType;
  location: Location;
  matches: DataRouteMatch[];
  initialized: boolean;
  navigation: Navigation;
  restoreScrollPosition: boolean | null;
  preventScrollReset: boolean;
  loaderData: Record<string, any>;
  actionData: Record<string, any> | null;
  errors: Record<string, any> | null;
  fetchers: Map<string, Fetcher>;
  blockers: Map<string, Blocker>;
}

Navigation and State Types

interface Navigation {
  state: "idle" | "loading" | "submitting";
  location?: Location;
  formMethod?: FormMethod;
  formAction?: string;
  formEncType?: FormEncType;
  formData?: FormData;
}

interface Blocker {
  state: "unblocked" | "blocked" | "proceeding";
  proceed?: () => void;
  reset?: () => void;
  location?: Location;
}

interface Fetcher {
  state: "idle" | "loading" | "submitting";
  data?: any;
  formMethod?: FormMethod;
  formAction?: string;
  formEncType?: FormEncType;
  formData?: FormData;
}

type FormMethod = "get" | "post" | "put" | "patch" | "delete";
type FormEncType = "application/x-www-form-urlencoded" | "multipart/form-data";
}