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

Utilities

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

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

Capabilities

Path Resolution

Resolves relative paths against base paths, following directory-like navigation semantics.

/**
 * Resolves URIs as though every path is a directory, no files
 * @param to - Target path (relative or absolute)
 * @param base - Base path to resolve against
 * @returns Resolved absolute path
 */
function resolve(to: string, base: string): string;

Usage Examples:

import { resolve } from "@reach/router";

// Absolute paths pass through unchanged
resolve("/foo/bar", "/baz/qux"); // => "/foo/bar"

// Relative paths resolve against base
resolve("profile", "/users/123"); // => "/users/123/profile"

// Parent directory navigation
resolve("../settings", "/users/123/profile"); // => "/users/123/settings"
resolve("../../admin", "/users/123/profile"); // => "/admin"

// Query string handling
resolve("?tab=settings", "/users/123"); // => "/users/123?tab=settings"

Parameter Interpolation

Inserts parameters into path templates with dynamic segments.

/**
 * Interpolates parameters into a path template
 * @param path - Path template with parameter placeholders
 * @param params - Object containing parameter values
 * @returns Path with parameters interpolated
 */
function insertParams(path: string, params: Record<string, any>): string;

Usage Examples:

import { insertParams } from "@reach/router";

// Basic parameter insertion
insertParams("/users/:userId", { userId: "123" }); 
// => "/users/123"

// Multiple parameters
insertParams("/users/:userId/posts/:postId", { 
  userId: "123", 
  postId: "456" 
}); 
// => "/users/123/posts/456"

// With query parameters
insertParams("/search/:query", { 
  query: "react",
  location: { search: "?type=posts" }
});
// => "/search/react?type=posts"

Redirect Validation

Validates that redirect routes have matching dynamic segments.

/**
 * Validates that redirect from/to paths have matching dynamic segments
 * @param from - Source path pattern
 * @param to - Target path pattern  
 * @returns True if redirect is valid, false otherwise
 */
function validateRedirect(from: string, to: string): boolean;

Usage Examples:

import { validateRedirect } from "@reach/router";

// Valid redirects - matching dynamic segments
validateRedirect("/old/:id", "/new/:id"); // => true
validateRedirect("/users/:userId/posts/:postId", "/u/:userId/p/:postId"); // => true

// Invalid redirects - mismatched segments
validateRedirect("/old/:id", "/new/:otherId"); // => false
validateRedirect("/users/:userId", "/posts/:postId"); // => false

// Static paths
validateRedirect("/old-path", "/new-path"); // => true

Object Comparison

Performs shallow comparison of two objects for equality.

/**
 * Shallow compares two objects for equality
 * @param obj1 - First object to compare
 * @param obj2 - Second object to compare
 * @returns True if objects have same keys and values, false otherwise  
 */
function shallowCompare(obj1: object, obj2: object): boolean;

Usage Examples:

import { shallowCompare } from "@reach/router";

// Equal objects
shallowCompare({ a: 1, b: 2 }, { a: 1, b: 2 }); // => true

// Different values
shallowCompare({ a: 1, b: 2 }, { a: 1, b: 3 }); // => false

// Different keys
shallowCompare({ a: 1, b: 2 }, { a: 1, c: 2 }); // => false

// Nested objects (shallow comparison)
shallowCompare(
  { a: { nested: true } }, 
  { a: { nested: true } }
); // => false (different object references)

Install with Tessl CLI