Read Me

​​​ ​​ ​​ ​​ ​​​
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
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)
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.
import { from } from 'rxjs/observable/from'
​
from(router).map(({ route }) => {
  /* happy routing */
})
Examples
With 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​
Introduction
Last updated 4 months ago