Read Me

Official website: router5.js.org

Router5

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

import createRouter from 'router5'
import browserPlugin from 'router5/plugins/browser'

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

const router = createRouter(routes).usePlugin(browserPlugin())

router.start()

With React (new context API)

import React from 'react'
import ReactDOM from 'react-dom'
import { RouteProvider, Route } from 'react-router5'

function App({ route }) {
    if (!route) {
        return null
    }

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

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

ReactDOM.render(
    <RouteProvider router={router}>
        <Route>{({ route }) => <App route={route} />}</Route>
    </RouteProvider>,
    document.getElementById('root')
)

With observables

Your router instance is compatible with most observable libraries.

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

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

Examples

• With React: code | live
• With React new context API: code | live
• With Redux (and React): code | live

Docs

• 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