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

Core Routing

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

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

Capabilities

Router Component

The main routing component that matches child routes against the current location and renders the matching component.

/**
 * Core routing container that matches child routes against current location
 * @param props - Router configuration options
 */
function Router(props: {
  basepath?: string;
  primary?: boolean;
  children: React.ReactNode;
  component?: string | React.ComponentType;
  [key: string]: any;
}): React.ReactElement;

Props:

basepath (string, optional) - Base path for nested routers
primary (boolean, optional) - Whether this router manages focus (defaults to true)
children (React.ReactNode) - Route components with path props
component (string | React.ComponentType, optional) - Component to wrap matched route (defaults to "div")
Additional props are passed to the wrapper component

Usage Examples:

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

// Basic routing
const App = () => (
  <Router>
    <Home path="/" />
    <About path="/about" />
    <Contact path="/contact" />
  </Router>
);

// Nested routing with basepath
const Dashboard = () => (
  <Router basepath="/dashboard">
    <Overview path="/" />
    <Settings path="/settings" />
    <Profile path="/profile" />
  </Router>
);

// Custom wrapper component
const App = () => (
  <Router component="main" className="app-router">
    <Home path="/" />
    <About path="/about" />
  </Router>
);

Route Components

Route components are regular React components that receive special props when matched by the Router.

/**
 * Route components receive these props when matched
 */
interface RouteComponentProps {
  // Path parameters extracted from the route
  [paramName: string]: string;
  // Matched URI portion
  uri: string;
  // Current location object
  location: Location;
  // Navigation function scoped to current route
  navigate: (to: string | number, options?: NavigateOptions) => Promise<void>;
  // Any additional props passed to the route component
  [prop: string]: any;
}

Usage Examples:

// Route with path parameters
const User = ({ userId, location, navigate }) => (
  <div>
    <h1>User: {userId}</h1>
    <p>Current path: {location.pathname}</p>
    <button onClick={() => navigate("/")}>Go Home</button>
  </div>
);

// Usage in Router
<Router>
  <User path="/users/:userId" />
</Router>

// Route with wildcard
const CatchAll = ({ "*": splat, location }) => (
  <div>
    <h1>Page Not Found</h1>
    <p>Unmatched path: {splat}</p>
    <p>Full location: {location.pathname}</p>
  </div>
);

<Router>
  <Home path="/" />
  <CatchAll path="/*" />
</Router>

Default Routes

Routes that match when no other route matches the current path.

/**
 * Default route component that renders when no other routes match
 */
interface DefaultRouteProps {
  default: true;
  // Standard route component props
  location: Location;
  navigate: (to: string | number, options?: NavigateOptions) => Promise<void>;
  uri: string;
}

Usage Examples:

const NotFound = ({ location }) => (
  <div>
    <h1>404 - Page Not Found</h1>
    <p>Could not find {location.pathname}</p>
  </div>
);

<Router>
  <Home path="/" />
  <About path="/about" />
  <NotFound default />
</Router>

Nested Routing

Routers can be nested to create complex routing hierarchies with relative path resolution.

Usage Examples:

const App = () => (
  <Router>
    <Home path="/" />
    <Dashboard path="/dashboard/*" />
  </Router>
);

const Dashboard = ({ children }) => (
  <div>
    <nav>Dashboard Navigation</nav>
    <Router>
      <DashboardHome path="/" />
      <Settings path="/settings" />
      <Profile path="/profile" />
    </Router>
  </div>
);

// Alternative approach with explicit nesting
const Dashboard = ({ children }) => (
  <div>
    <nav>Dashboard Navigation</nav>
    {children}
  </div>
);

<Router>
  <Home path="/" />
  <Dashboard path="/dashboard">
    <DashboardHome path="/" />
    <Settings path="/settings" />
    <Profile path="/profile" />
  </Dashboard>
</Router>

Path Patterns

Supported path pattern syntax for route matching.

/**
 * Path pattern syntax:
 * - Static segments: /users/profile
 * - Dynamic segments: /users/:userId
 * - Wildcard segments: /files/*
 * - Named wildcards: /files/*filepath
 * - Optional segments: Not directly supported, use default routes
 */

Path Pattern Examples:

// Static paths
<Home path="/" />
<About path="/about" />
<Contact path="/contact" />

// Dynamic parameters
<User path="/users/:userId" />
<Post path="/blog/:category/:postId" />

// Wildcard matching
<Files path="/files/*" />
<Admin path="/admin/*" />

// Named wildcards
<Files path="/files/*filepath" />
// Component receives filepath parameter with remaining path

// Nested routing patterns
<Dashboard path="/dashboard/*">
  <Overview path="/" />
  <Settings path="/settings" />
  <UserSettings path="/settings/:section" />
</Dashboard>

Install with Tessl CLI