<commit_before># 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(<App />, 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)<commit_msg>docs: correct example<commit_after># 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)
{'fraction_non_alphanumeric': 0.17916194790486975, 'fraction_numerical': 0.013137032842582106, 'mean_word_length': 4.772549019607843, 'pattern_counts': {'":': 0, '<': 15, '<?xml version=': 0, '>': 19, 'https://': 24, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '691045', 'n_tokens_mistral': 1518, 'n_tokens_neox': 1463, 'n_words': 307}