tessl/npm-reach--router

Next generation React routing library with accessible navigation and focus management.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

Reach Router

Name: tessl/npm-reach--router
Author: tessl

Reach Router is a React routing library that provides accessible, declarative routing solutions for React applications. It features automatic focus management, dynamic route matching, and seamless navigation with built-in accessibility support.

Package Information

Package Name: @reach/router
Package Type: npm
Language: JavaScript (React library)
Installation: npm install @reach/router

Core Imports

import { Router, Link, navigate } from "@reach/router";

For CommonJS:

const { Router, Link, navigate } = require("@reach/router");

Basic Usage

import React from "react";
import { Router, Link } from "@reach/router";

const Home = () => <div>Welcome Home!</div>;
const About = () => <div>About Us</div>;
const User = ({ userId }) => <div>User: {userId}</div>;

function App() {
  return (
    <div>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
        <Link to="/users/123">User 123</Link>
      </nav>
      
      <Router>
        <Home path="/" />
        <About path="/about" />
        <User path="/users/:userId" />
      </Router>
    </div>
  );
}

Architecture

Reach Router is built around several key components:

Router Component: Core routing container that matches child routes against current location
Link Component: Accessible navigation links with automatic active state management
Location Context: React context providing location state and navigation functions
History Management: Browser history integration with memory fallback for testing
Focus Management: Automatic focus handling for accessibility compliance
React Hooks: Modern hook-based API for accessing routing state

Capabilities

Core Routing

Essential routing components for building navigable React applications with automatic route matching and focus management.

function Router(props: {
  basepath?: string;
  primary?: boolean;
  children: React.ReactNode;
  component?: string | React.ComponentType;
  [key: string]: any;
}): React.ReactElement;

Core Routing

Navigation

Link components and programmatic navigation functions for moving between routes with accessibility features and state management.

const Link: React.ForwardRefExoticComponent<{
  to: string;
  state?: any;
  replace?: boolean;
  getProps?: (props: LinkProps) => object;
  innerRef?: React.Ref<HTMLAnchorElement>;
} & React.AnchorHTMLAttributes<HTMLAnchorElement> & React.RefAttributes<HTMLAnchorElement>>;

function navigate(to: string | number, options?: {
  state?: any;
  replace?: boolean;
}): Promise<void>;

Navigation

Location and Context

Location providers and consumer components for accessing current location state and navigation functions in React components.

function LocationProvider(props: {
  history?: History;
  children: React.ReactNode | ((context: LocationContext) => React.ReactNode);
}): React.ReactElement;

function Location(props: {
  children: (context: LocationContext) => React.ReactNode;
}): React.ReactElement;

interface LocationContext {
  location: Location;
  navigate: (to: string | number, options?: NavigateOptions) => Promise<void>;
}

Location and Context

React Hooks

Modern React hooks for accessing routing state and navigation functions in functional components.

function useLocation(): Location;
function useNavigate(): (to: string | number, options?: NavigateOptions) => Promise<void>;
function useParams(): Record<string, string> | null;
function useMatch(path: string): MatchResult | null;

React Hooks

History Management

History utilities for creating custom history instances and managing navigation state in different environments.

function createHistory(source: LocationSource, options?: any): History;
function createMemorySource(initialPath?: string): LocationSource;

const globalHistory: History;

History Management

Server-Side Rendering

Components and utilities for rendering routes on the server with static location context.

function ServerLocation(props: {
  url: string;
  children: React.ReactNode;
}): React.ReactElement;

Server-Side Rendering

Advanced Routing

Advanced routing patterns including redirects, conditional rendering, and route matching utilities.

function Redirect(props: {
  from?: string;
  to: string;
  replace?: boolean;
  state?: any;
  noThrow?: boolean;
}): React.ReactElement;

function Match(props: {
  path: string;
  children: (props: MatchProps) => React.ReactNode;
}): React.ReactElement;

function matchPath(path: string, uri: string): MatchResult | null;
function isRedirect(error: any): boolean;
function redirectTo(to: string): never;

Advanced Routing

Utilities

Path resolution and routing utility functions for advanced routing scenarios and custom integrations.

function resolve(to: string, base: string): string;
function insertParams(path: string, params: Record<string, any>): string;
function validateRedirect(from: string, to: string): boolean;
function shallowCompare(obj1: object, obj2: object): boolean;

Utilities

Types

interface Location {
  pathname: string; // URI encoded/decoded
  search: string;
  hash: string;
  href?: string; // Optional in non-browser environments
  origin?: string; // Optional in non-browser environments
  protocol?: string; // Optional in non-browser environments
  host?: string; // Optional in non-browser environments
  hostname?: string; // Optional in non-browser environments
  port?: string; // Optional in non-browser environments
  state: any;
  key: string; // Defaults to "initial"
}

interface NavigateOptions {
  state?: any;
  replace?: boolean;
}

interface MatchResult {
  route: RouteInfo;
  params: Record<string, string | string[]>; // Can contain arrays for splat routes
  uri: string; // Always normalized with leading slash
}

interface RouteInfo {
  path: string;
  default?: boolean;
  value: React.ReactElement;
}

interface History {
  location: Location;
  transitioning: boolean;
  listen(listener: (event: { location: Location; action: string }) => void): () => void;
  navigate(to: string | number, options?: NavigateOptions): Promise<void>;
}

interface LocationSource {
  location: {
    pathname: string;
    search: string;
    hash?: string;
    href?: string;
    origin?: string;
    protocol?: string;
    host?: string;
    hostname?: string;
    port?: string;
  };
  history: {
    state: any;
    pushState(state: any, title: string | null, url: string): void;
    replaceState(state: any, title: string | null, url: string): void;
    go(delta: number): void;
  };
  addEventListener(type: string, listener: () => void): void;
  removeEventListener(type: string, listener: () => void): void;
}

interface LinkProps {
  isCurrent: boolean;
  isPartiallyCurrent: boolean;
  href: string;
  location: Location;
}

interface MatchProps {
  navigate: (to: string | number, options?: NavigateOptions) => Promise<void>;
  location: Location;
  match: MatchResult | null;
}

Install with Tessl CLI

npx tessl i tessl/npm-reach--router

Workspace: tessl
Visibility: Public
Created: 6 months ago
Last updated: about 1 month ago
Describes: pkg:npm/@reach/router@1.3.x
Publish Source: CLI
Badge