# router5

> A simple, powerful, view-agnostic, modular and extensible router

Latest version **8.0.1** (published 2020-03-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install router5
pnpm add router5
yarn add router5
bun add router5
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 8.0.1 |
| Published | 2020-03-19 |
| First published | 2015-07-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 83.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1695 |
| Author | Thomas Roch |
| Maintainers | troch |
| Keywords | router, routing, html5, functional, reactive, universal, isomorphic |

## Links

- npm: https://www.npmjs.com/package/router5
- Repository: https://github.com/router5/router5
- Homepage: https://router5.js.org
- Issues: https://github.com/router5/router5/issues
- npm.io page: https://npm.io/package/router5

## Dependencies (3)

- [route-node](https://npm.io/package/route-node.md) 4.1.1
- [symbol-observable](https://npm.io/package/symbol-observable.md) 1.2.0
- [router5-transition-path](https://npm.io/package/router5-transition-path.md) ^8.0.1

## Alternatives

- [express-promise-router](https://npm.io/package/express-promise-router.md) — 736.1K weekly downloads
- [next-usequerystate](https://npm.io/package/next-usequerystate.md) — 29.8K weekly downloads
- [@bitkyc08/opencodex](https://npm.io/package/@bitkyc08/opencodex.md) — 4.6K weekly downloads
- [lynkr](https://npm.io/package/lynkr.md) — 575 weekly downloads
- [baremetal.js](https://npm.io/package/baremetal.js.md) — 42 weekly downloads

## Recent versions

- 8.0.1 (latest) — 2020-03-19
- 8.0.0 — 2020-03-01
- 7.0.2 — 2019-02-21
- 7.0.1 — 2018-12-21
- 7.0.0 — 2018-12-18
- 6.6.3 — 2018-12-15
- 6.6.2 — 2018-10-23
- 6.6.1 — 2018-10-16
- 6.6.0 — 2018-10-04
- 6.5.1 — 2018-09-26
- 6.5.0 — 2018-09-11
- 6.4.2 — 2018-08-19
- 6.4.1 — 2018-08-07
- 6.4.0 — 2018-08-06
- 6.3.0 — 2018-07-11
- … 133 more at https://npm.io/package/router5/versions

## README

# Router5

[![npm version](https://badge.fury.io/js/router5.svg)](http://badge.fury.io/js/router5)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
[![Build Status](https://travis-ci.org/router5/router5.svg)](https://travis-ci.org/router5/router5) [![Join the chat at https://gitter.im/router5/router5](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/router5/router5?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) [![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)

> Official website: [router5.js.org](https://router5.js.org)

router5 is a **framework and view library agnostic router**.

- **view / state separation**: router5 processes routing **instructions** and outputs **state** updates.
- **universal**: works client-side and server-side
- **simple**: define your routes, start to listen to route changes
- **flexible**: you have control over transitions and what happens on transitions

```javascript
import createRouter from 'router5'
import browserPlugin from 'router5-plugin-browser'

const routes = [
  { name: 'home', path: '/' },
  { name: 'profile', path: '/profile' }
]

const router = createRouter(routes)

router.usePlugin(browserPlugin())

router.start()
```

**With React \(hooks\)**

```javascript
import React from 'react'
import ReactDOM from 'react-dom'
import { RouterProvider, useRoute } from 'react-router5'

function App() {
  const { route } = useRoute()

  if (!route) {
    return null
  }

  if (route.name === 'home') {
    return <h1>Home</h1>
  }

  if (route.name === 'profile') {
    return <h1>Profile</h1>
  }
}

ReactDOM.render(
  <RouterProvider router={router}>
    <App />
  </RouterProvider>,
  document.getElementById('root')
)
```

**With observables**

Your router instance is compatible with most observable libraries.

```javascript
import { from } from 'rxjs/observable/from'

from(router).map(({ route }) => {
  /* happy routing */
})
```

### Examples

- With React: [`code`](./examples/react) | [`live`](https://codesandbox.io/s/github/router5/router5/tree/master/examples/react)

### Docs

- Introduction
  - [Why router5?](https://router5.js.org/introduction/why-router5)
  - [Getting Started](https://router5.js.org/introduction/getting-started)
  - [Ecosystem](https://router5.js.org/introduction/ecosystem)
  - [Core concepts](https://router5.js.org/introduction/core-concepts)
  - [Transition phase](https://router5.js.org/introduction/transition-phase)
- Guides
  - [Defining routes](https://router5.js.org/guides/defining-routes)
  - [Path Syntax](https://router5.js.org/guides/path-syntax)
  - [Router options](https://router5.js.org/guides/router-options)
  - [Navigating](https://router5.js.org/guides/navigating)
  - [In the browser](https://router5.js.org/guides/in-the-browser)
  - [Observing state](https://router5.js.org/guides/observing-state)
- Integration
  - [With React](https://router5.js.org/integration/with-react)
  - [With Redux](https://router5.js.org/integration/with-redux)
- Advanced
  - [Plugins](https://router5.js.org/advanced/plugins)
  - [Middleware](https://router5.js.org/advanced/middleware)
  - [Preventing navigation](https://router5.js.org/advanced/preventing-navigation)
  - [Errors and redirections](https://router5.js.org/advanced/errors-and-redirections)
  - [Dependency injection](https://router5.js.org/advanced/dependency-injection)
  - [Loading async data](https://router5.js.org/advanced/loading-async-data)
  - [Universal routing](https://router5.js.org/advanced/universal-routing)
  - [Listeners plugin](https://router5.js.org/advanced/listeners-plugin)
- [API Reference](https://router5.js.org/api-reference)

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