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 */
})- Introduction
- Guides
- Integration
- Advanced
- API Reference
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent