router5
  • Read Me
  • 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
  • Migration
    • Migrating from 7.x to 8.x
    • Migrating from 6.x to 7.x
    • Migrating from 5.x to 6.x
    • Migrating from 4.x to 5.x
    • Migrating from 3.x to 4.x
    • Migrating from 2.x to 3.x
    • Migrating from 1.x to 2.x
    • Migrating from 0.x to 1.x
Powered by GitBook
On this page
  • Examples
  • Docs

Read Me

NextIntroduction

Last updated 5 years ago

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

npm version
License: MIT
Build Status
Join the chat at https://gitter.im/router5/router5
styled with prettier