pocket-router
v1.0.1
Published
Simple react router (MobX)
Downloads
9
Readme
Pocket Router
Minimalistic React routing solution with internal state management.
Features
- [x] Holds context of your application state
- [x] Single routing config for the whole app
- [x] Supports sync and async routes (blocking vs non-blocking data resolutions)
- [ ] Middleware for extensibility
- [ ] Server Side Rendering
- [ ] Transition effects
- [ ] Guards (conditional resolves and / or redirects)
Quickstart
Install the main module, along with required peer dependencies:
npm install --save pocket-router
# Required peer dependencies
npm install --save [email protected] [email protected] [email protected]
Create a sample app as follows:
import React from 'react'
import ReactDOM from 'react-dom'
import { createBrowserHistory } from 'history'
import { init, Outlet, RouterProvider } from 'pocket-router'
const App = () => <h1>Main Route</h1>
const Login = () => <h1>Login Route</h1>
const Overview = () => <h1>Auth-Walled Route</h1>
const appContainer = {
AuthStore: {
session: null,
fetchSession: () => { }
},
OverviewStore: {
data: null,
fetchData: () => { }
}
}
const routes = [{
path: '',
component: App,
willResolve: async (route, context) => {
const { router, appContainer } = context
const { fetchSession } = appContainer.AuthStore
const session = await fetchSession();
if (!session) {
return router.push('/login')
}
return router.push('/overview')
},
children: [{
path: 'login',
component: Login,
willResolve: async (route, context) => {
const { router, appContainer } = context
const { session } = appContainer.AuthStore
// redirect to '/overview' if we're already authenticated
if (session) {
return router.push('/overview')
}
}
}, {
path: 'overview',
component: Overview,
willResolveAsync: (route, context) => {
const { router, appState } = context
const { data, fetchData } = appContainer.OverviewStore
if (!data) {
fetchData()
}
}
}]
}]
const router = init({
history: createBrowserHistory(),
getContext: () => ({ appContainer }),
routes
})
router.start(() => {
ReactDOM.render(
<RouterProvider router={router}>
<Outlet />
</RouterProvider>,
document.getElementById('root')
)
})