• Stars
    star
    1,724
  • Rank 26,172 (Top 0.6 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created almost 9 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Flexible and powerful universal routing solution

Router5

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

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

Docs