# reach/router

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/reach-router).**

6,834 stars · 321 forks · JavaScript · MIT

## Links

- GitHub: https://github.com/reach/router
- Homepage: https://reach.tech/router
- awesome-repositories: https://awesome-repositories.com/repository/reach-router.md

## Description

Reach Router is a client-side routing library for React applications that maps URL patterns to components without full page reloads. It defines navigation rules and component rendering through declarative route configuration, using nested React component trees instead of separate configuration files.

The library supports parent-child route hierarchies so shared UI elements persist across page transitions, and provides a declarative Navigate component that triggers URL changes and view updates when rendered. It extracts dynamic segments from URL patterns and passes them as props to matched route components, while automatically managing browser focus on navigation for accessibility.

Reach Router detects browser URL changes by subscribing to the History API, enabling deep linking and browser history support. It creates clickable anchors that navigate between application-defined paths and passes data between pages by encoding parameters in the URL path or query string.

## Tags

### Software Engineering & Architecture

- [Client-Side Routers](https://awesome-repositories.com/f/software-engineering-architecture/software-architecture/architectural-patterns/layering-presentation/application-layer-architectures/application-architecture-patterns/client-side-routers.md) — Maps URL patterns to components in a single-page application without full page reloads.
- [Single-Page Navigators](https://awesome-repositories.com/f/software-engineering-architecture/performance-reliability/performance-optimization/frontend-rendering-loading/page-navigation-prefetching/paging-library-data-loading/sequential-page-navigators/single-page-navigators.md) — Changes the visible page in a single-page application without a full browser reload, updating the URL. ([source](https://reach.tech/router))

### Web Development

- [Client-side Routing](https://awesome-repositories.com/f/web-development/client-side-routing.md) — Navigates between views in a single-page application without full page reloads, updating the URL to match the current view.
- [Component Composition](https://awesome-repositories.com/f/web-development/component-composition.md) — Composes parent and child routes using React component trees for shared layouts across navigation.
- [URL Change Interceptors](https://awesome-repositories.com/f/web-development/event-interception-frameworks/url-change-interceptors.md) — Subscribes to the popstate event and History API calls to detect browser URL changes.
- [Nested Layouts](https://awesome-repositories.com/f/web-development/file-system-routing/nested-layouts.md) — Composes parent and child route components so shared UI elements persist across page transitions. ([source](https://cdn.jsdelivr.net/gh/reach/router@master/README.md))
- [Nested Routing](https://awesome-repositories.com/f/web-development/nested-routing.md) — Composes parent and child routes using React component trees for shared layouts across navigation.
- [Programmatic Navigation](https://awesome-repositories.com/f/web-development/programmatic-navigation.md) — Changes the visible page in a single-page application by updating the browser URL without a full reload.
- [Declarative Navigate Components](https://awesome-repositories.com/f/web-development/programmatic-navigation/declarative-navigate-components.md) — Provides a declarative Navigate React component that triggers URL changes and view updates when rendered.
- [Client-Side Navigation Components](https://awesome-repositories.com/f/web-development/routing-systems/routing/frontend-navigation-systems/client-side-navigation-components.md) — Maps URL patterns to React components for single-page application navigation without full page reloads.
- [Declarative Routing Libraries](https://awesome-repositories.com/f/web-development/routing-systems/routing/frontend-navigation-systems/declarative-routing-libraries.md) — Lets developers define navigation rules and component rendering through declarative route configuration.
- [Component Tree Matchers](https://awesome-repositories.com/f/web-development/routing-systems/routing/frontend-navigation-systems/hierarchical-route-matching/component-tree-matchers.md) — Provides component-based route matching using nested React component trees instead of configuration files.
- [Route Parameter Extraction](https://awesome-repositories.com/f/web-development/routing-systems/routing/parameter-handling-utilities/path-parameter-converters/route-parameter-extraction.md) — Extracts dynamic segments from URL patterns and passes them as props to matched route components.
- [URL Data Parsing](https://awesome-repositories.com/f/web-development/url-data-parsing.md) — Sends parameters and data between pages by encoding them in the URL path or query string. ([source](https://reach.tech/router/))

### Part of an Awesome List

- [Declarative URL Matchers](https://awesome-repositories.com/f/awesome-lists/devtools/regex-and-pattern-matching/regex-pattern-matching/url-pattern-matchers/declarative-url-matchers.md) — Compares the current URL against a declared pattern and renders the associated component when matched. ([source](https://reach.tech/router/))

### Development Tools & Productivity

- [History Event Listeners](https://awesome-repositories.com/f/development-tools-productivity/change-tracking/state-tracking-utilities/state-history-buffers/browser-history-state-caching/history-event-listeners.md) — Subscribes to the popstate event and History API calls to detect browser URL changes.

### Mobile Development

- [Client-Side Link Components](https://awesome-repositories.com/f/mobile-development/deep-link-routing/client-side-link-components.md) — Creates clickable anchors that navigate between application-defined paths without reloading the page. ([source](https://cdn.jsdelivr.net/gh/reach/router@master/README.md))

### Networking & Communication

- [URL Parameter Configuration](https://awesome-repositories.com/f/networking-communication/url-parameter-configuration.md) — Encodes parameters in URL paths and query strings to pass data between pages.

### User Interface & Experience

- [Route Declarations](https://awesome-repositories.com/f/user-interface-experience/declarative-component-architectures/route-declarations.md) — Defines URL-to-component mappings using nested React component trees instead of separate configuration files.
- [Navigation Components](https://awesome-repositories.com/f/user-interface-experience/declarative-ui-components/navigation-components.md) — Ships a declarative Navigate component that triggers URL changes and view updates when rendered.
- [URL-Synchronized Navigation](https://awesome-repositories.com/f/user-interface-experience/url-synchronized-navigation.md) — Synchronizes application views with browser URL changes, enabling deep linking and browser history support.