https://github.com/tripolskypetr/react-history-switch

Self-hosted context-free Switch routing component for History.js library (React). The library was created to transfer navigation responsibility from a view into Mobx state container (MVC). Also can be used separately as a self-hosted router
https://github.com/tripolskypetr/react-history-switch

history historyjs link location mobx mvc observable react route router routing search-params switch url-search-params url-search-params-extended

Last synced: about 2 months ago
JSON representation

Self-hosted context-free Switch routing component for History.js library (React). The library was created to transfer navigation responsibility from a view into Mobx state container (MVC). Also can be used separately as a self-hosted router

• Host: GitHub
• URL: https://github.com/tripolskypetr/react-history-switch
• Owner: tripolskypetr
• Created: 2021-09-03T01:38:40.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2023-12-01T15:28:02.000Z (about 1 year ago)
• Last Synced: 2024-10-20T11:48:11.630Z (2 months ago)
• Topics: history, historyjs, link, location, mobx, mvc, observable, react, route, router, routing, search-params, switch, url-search-params, url-search-params-extended
• Language: TypeScript
• Homepage: https://github.com/react-declarative/react-declarative
• Size: 1.59 MB
• Stars: 3
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# react-history-switch

> Self-hosted context-free Switch component for [History.js](https://www.npmjs.com/package/history) library

## Installation

```bash

npm install --save react-history-switch

```

## Purpose of development

The library was created to transfer navigation responsibility from a view into Mobx state container ([MVC](https://en.wikipedia.org/wiki/Model-view-controller)). Also can be used separately as a self-hosted router

```tsx

import { createObservableHistory } from "mobx-observable-history"

...

const routerService = createObservableHistory();

...

```

## Minimal example

```tsx

import React from 'react';

import { Switch } from 'react-history-switch';

import { createBrowserHistory } from 'history';

const history = createBrowserHistory();

const Link = ({

    children,

    href,

}) => (

    
 history.push(href)}

    >

        {children}

    

);


const HomePage = () => (

    <>

        
Home page

        

            Next page

        

    >

);


const NextPage = ({

    param,

}) => (

    <>

        
The next page

        
{`Param: ${param}`}

        

            Go back

        

    >

);


const NotFound = () => (

    
Not found

);


/**

 * @type import('react-history-switch').ISwitchItem[]

 */

const items = [

    {

        path: '/',

        redirect: '/home',

    },

    {

        path: '/home',

        element: HomePage,

    },

    {

        path: '/next/:param',

        element: NextPage,

    },

];

export const App = () => {

    return (

        

    );

};

export default App;

```

## Mobx app example

If you are looking for Mobx MVC example app you should check [this](https://github.com/react-declarative/list-app-mobx) repository

## License

MIT © [tripolskypetr](https://github.com/tripolskypetr)