pocket-router v1.0.1

Pocket Router

Minimalistic React routing solution with internal state management.

Features

• Holds context of your application state
• Single routing config for the whole app
• 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 history@4.x.x mobx@4.x.x mobx-react@5.x.x

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')
  )
})