Router

Installation

yarn add @simosol/router

Usage

To run demo component as is, install additional packages:

yarn add mobx mobx-react-lite @simosol/boxes

import React from 'react';
import { observable } from 'mobx';
import { observer } from 'mobx-react-lite';
import '@simosol/boxes/lib/boxes.scss';
import { VBox } from '@simosol/boxes';

import Router from '@simosol/router';

type Page =
  { p: '' } |
  { p: 'main' } |
  { p: 'secondary' } |
  { p: 'secondary', p1: 'subpage1' } |
  { p: 'secondary', p1: 'subpage2' }
  ;

const pageStore: { page: Page } = observable({ page: { p: '' } });

const router = new Router(pageStore);

const Button = ({ page, children }: { page: Page, children: React.ReactNode }) => (
  <button
    type="button"
    onClick={() => { router.page = page; }}
  >
    {children}
  </button>
);

const App = observer(() => {
  const { page } = pageStore;
  return (

    <VBox gap={16} align="start">
      <div>
        Current Page is:
        {' '}
        { router.getHash(page) }
      </div>
      { (page.p === '' || page.p === 'main') && (
        <Button page={{ p: 'secondary' }}>Go to secondary Page</Button>
      )}
      { page.p === 'secondary' && (
        <>
          <Button page={{ p: 'main' }}>Return to main page</Button>
          <Button page={{ p: 'secondary', p1: 'subpage1' }}>Go to subpage 1</Button>
          <Button page={{ p: 'secondary', p1: 'subpage2' }}>Go to subpage 2</Button>
        </>
      )}
    </VBox>
  );
});

export default App;