Read Me
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
1
import createRouter from 'router5'
2
import browserPlugin from 'router5-plugin-browser'
3
4
const routes = [
5
{ name: 'home', path: '/' },
6
{ name: 'profile', path: '/profile' }
7
]
8
9
const router = createRouter(routes)
10
11
router.usePlugin(browserPlugin())
12
13
router.start()
Copied!
With React (hooks)
1
import React from 'react'
2
import ReactDOM from 'react-dom'
3
import { RouterProvider, useRoute } from 'react-router5'
4
5
function App() {
6
const { route } = useRoute()
7
8
if (!route) {
9
return null
10
}
11
12
if (route.name === 'home') {
13
return <h1>Home</h1>
14
}
15
16
if (route.name === 'profile') {
17
return <h1>Profile</h1>
18
}
19
}
20
21
ReactDOM.render(
22
<RouterProvider router={router}>
23
<App />
24
</RouterProvider>,
25
document.getElementById('root')
26
)
Copied!
With observables
Your router instance is compatible with most observable libraries.
1
import { from } from 'rxjs/observable/from'
2
3
from(router).map(({ route }) => {
4
/* happy routing */
5
})
Copied!
Examples
Docs
- Introduction
- Integration
Last modified 2yr ago