Router5

  

> Official website: 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

Home

ReactDOM.render(


,
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 /
})
`

$3

- With React: code | live`

$3

- Introduction
- Why router5?
- Getting Started
- Ecosystem
- Core concepts
- Transition phase
- Guides
- Defining routes
- Path Syntax
- Router options
- Navigating
- In the browser
- Observing state
- Integration
- With React
- With Redux
- Advanced
- Plugins
- Middleware
- Preventing navigation
- Errors and redirections
- Dependency injection
- Loading async data
- Universal routing
- Listeners plugin
- API Reference