MobX based router for React and React Native

epic-react-router

MobX based router for React and React Native.

Installation

npm install epic-react-router
// Install peer dependencies if not yet installed.
npm install mobx mobx-react react

Usage

import React from 'react'
import { render } from 'react-dom'
import { Router, Page } from 'epic-react-router'

// Declare some components used as pages.
const Overview = () => <p>Overview</p>
const About = () => <p>About</p>
const Article = ({ id }: { id: string }) => <p>Article: {id}</p>

// Configure available and initial pages before rendering.
Router.setPages(
  {
    overview: Overview,
    'nested/about': About,
    article: Article,
  },
  'overview' // Initial page.
)

render(
  <div>
    <button onClick={() => Router.go('nested/about')}>About</button>
    <button onClick={() => Router.go('article', { id: 2 })}>Article 2</button>
    // Currently active page will be displayed here.
    <Page />
  </div>,
  document.body
)

<Page />

import { Page } from 'epic-react-router'

Use the <Page /> component anywhere in your layout to display the current page. Any props you pass to it will be handed over to the page components themselves:

<Page onError={(error) => console.error(error)} />

Router

import { Router } from 'epic-react-router'

The Router-Store can be accessed from anywhere to modify the state of the Router.

Router.setPages(pages: { [key: string]: React.ReactNode }, initialRoute: string)

Configure the route keys and their associated components, plus the route to be displayed initially.

Router.go(route: string, parameters: object = {}, state: object = {}, replace = false)

Navigates to a route. Parameters will be added to the URL search query and together with the state (both optional) will be passed to the page component as props. If replace is true, back() will not lead to the previous page.

Router.back() go back one step in the history.

Router.forward() go forward one step.

Router.initial() go to the initial route.

addPage(route: string, component: React.ReactNode)

Add a single page after initialization. This can be useful when pages are loaded on request.

If process.env.PUBLIC_URL is set during build the path will be adapted accordingly.

Download Details:

Author: tobua

Demo: https://www.npmjs.com/package/epic-react-router

Source Code: https://github.com/tobua/epic-react-router

#react-native #react #mobile-apps