# react-router-component

> Declarative router component for React

Latest version **0.40.0** (published 2020-02-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-router-component
pnpm add react-router-component
yarn add react-router-component
bun add react-router-component
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 0.40.0 |
| Published | 2020-02-20 |
| First published | 2014-02-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 8 |
| Unpacked size | 59.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 870 |
| Author | Andrey Popp |
| Maintainers | andreypopp, strml |
| Keywords | react, react-component, router, history, pushState |

## Links

- npm: https://www.npmjs.com/package/react-router-component
- Repository: https://github.com/strml/react-router-component
- Homepage: http://strml.viewdocs.io/react-router-component
- Issues: https://github.com/strml/react-router-component/issues
- npm.io page: https://npm.io/package/react-router-component

## Dependencies (8)

- [qs](https://npm.io/package/qs.md) 6.x
- [urllite](https://npm.io/package/urllite.md) ~0.5.0
- [prop-types](https://npm.io/package/prop-types.md) 15.x
- [object.omit](https://npm.io/package/object.omit.md) ^3.0.0
- [url-pattern](https://npm.io/package/url-pattern.md) ~1.0.1
- [object-assign](https://npm.io/package/object-assign.md) ^4.1.0
- [is-equal-shallow](https://npm.io/package/is-equal-shallow.md) ^0.1.3
- [create-react-class](https://npm.io/package/create-react-class.md) 15.x

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.40.0 (latest) — 2020-02-20
- 0.39.1 — 2018-02-08
- 0.39.0 — 2017-09-26
- 0.38.0 — 2017-09-13
- 0.37.0 — 2017-04-29
- 0.36.5 — 2017-02-27
- 0.36.4 — 2017-01-23
- 0.36.3 — 2016-12-05
- 0.36.2 — 2016-12-05
- 0.36.1 — 2016-11-12
- 0.36.0 — 2016-07-12
- 0.35.0 — 2016-07-01
- 0.34.0 — 2016-06-16
- 0.33.0 — 2016-06-09
- 0.32.2 — 2016-04-25
- … 76 more at https://npm.io/package/react-router-component/versions

## README

# React Router Component

[![TravisCI Build Status](https://travis-ci.org/STRML/react-router-component.svg?branch=master)](https://travis-ci.org/STRML/react-router-component)


|Version        | Compatibility|
|---------------|--------------|
|>= 0.39.0      | React v15,16 |
|>= 0.32.0      | React v15    |
|>= 0.27.0      | React 0.14   |
|0.24 - 0.26.0  | React 0.13   |
|0.23 - 0.26.0  | React 0.12   |
|0.20 - 0.22.2  | React 0.11   |
|< 0.20         | React 0.10   |

React router component allows you to define routes in your [React][] application
in a declarative manner, directly as a part of your component hierarchy.

## Project Overview

Usage is as simple as just returning a configured router component from your
component's `render()` method:

    <Locations>
      <Location path="/" handler={MainPage} />
      <Location path="/users/:username" handler={UserPage} />
      <Location path="/search/*" handler={SearchPage} />
      <Location path={/\/product\/([0-9]*)/} handler={ProductPage} />
    </Locations>

Having routes defined as a part of your component hierarchy allows to
dynamically reconfigure routing based on your application state. For example you
can return a different set of allowed locations for anonymous and signed-in
users.

React router component can dispatch based on `location.pathname` or
`location.hash` if browser doesn't support History API (see [hash routing][hash-routing]).

Props can be passed through the router by setting them directly on each `<Location>`, or to all possible routes
via a `childProps` hash.

Furthermore it provides advanced features like support for [regex matching][regex],
[full page server side rendering][server-side], [multiple routers][multiple] on the same page,
[querystring parsing][querystring], and [contextual routers][contextual].

Its functionality is tested using [Saucelabs][] on all modern browsers (IE >= 9,
Chrome >= 27, Firefox >= 25, Safari >= 6 and Mobile Safari on iPhone and iPad >=
6).

Its size is about 3.5kb gzipped.

## Installation

React router component is packaged on npm:

    % npm install react-router-component

## Docs

* [Overview and Usage][docs]
* [Implementation Visualization][implementation]
* [Hash Routing][hash-routing]
* [Parsing Query Strings][querystring]
* [Server-side Rendering][server-side]
* [Multiple Routers][multiple]
* [Contextual Routers][contextual]
* [Capturing Clicks on Anchor Elements][a-elements]
* [A custom Link Component][rec-custom-link]
* [A custom Router Component][rec-custom-router]
* [An Animated Router Component with ES6][rec-es6-custom-router]
* [Overriding URL-Pattern's Compiler][override-url-pattern]

[hash-routing]: http://strml.viewdocs.io/react-router-component/hash-routing
[regex]: http://strml.viewdocs.io/react-router-component#user-content-regular-expressions
[server-side]: http://strml.viewdocs.io/react-router-component/server-side
[multiple]: http://strml.viewdocs.io/react-router-component/multiple
[contextual]: http://strml.viewdocs.io/react-router-component/contextual
[querystring]: http://strml.viewdocs.io/react-router-component/querystring
[a-elements]: http://strml.viewdocs.io/react-router-component/a-elements
[rec-custom-link]: http://strml.viewdocs.io/react-router-component/recipes/custom-link
[rec-custom-router]: http://strml.viewdocs.io/react-router-component/recipes/custom-router
[rec-es6-custom-router]: http://strml.viewdocs.io/react-router-component/recipes/es6-custom-router
[override-url-pattern]: http://strml.viewdocs.io/react-router-component/override-url-pattern
[implementation]: http://strml.viewdocs.io/react-router-component/implementation

[docs]: http://strml.viewdocs.io/react-router-component
[React]: http://facebook.github.io/react/
[React-Refs]: http://facebook.github.io/react/docs/more-about-refs.html
[React-Shims]: http://facebook.github.io/react/docs/working-with-the-browser.html#polyfills-needed-to-support-older-browsers
[Saucelabs]: https://saucelabs.com

---
_Source: https://npm.io/package/react-router-component · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._