pocket-router

1.0.1 • Public • Published

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

Readme

Keywords

none

Package Sidebar

Install

npm i pocket-router

Weekly Downloads

1

Version

1.0.1

License

MIT

Unpacked Size

15 kB

Total Files

3

Last publish

Collaborators

  • averted