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