Router5

Flexible and powerful universal routing solution

Description

Router5 is an alternative for React-Router, with support for async API calls, transition middleware and excellent URL integration. Parameter support, fallback routes and route definitions offer the flexibility and stability you were looking for. Platform agnostic but works well with React and optionally MobX.

Programming language: TypeScript

License: MIT License

Tags: Code Design     Router     React     Reactjs     Api     Middleware     Routing     Async     Asynchronous    

Latest version: v7.1.0

README

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

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](./examples/react) | 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