tessl/npm-react-router-dom

Declarative routing for React web applications

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

React Router DOM

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

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";
}