react-history-router

React History Router

react-history-router is a routing library built on top of the React and the HTML5 history API, which can used to create navigation in React apps using either JavaScript or TypeScript. -- The react-history-router module is a light weight router that only ships the basics you'll need to create a single page application using the HTML5 history API. Comming in at only 3kb!

≪ Installation · Documentation · License ≫

Hi! My name is Jeffrey Lanters, thanks for checking out my modules! I've been a Game and Web developer for years when in 2020 I decided to start sharing my modules by open-sourcing them. So feel free to look around. If you're using this module for production, please consider donating to support the project. When using any of the packages, please make sure to Star this repository and give credit to Jeffrey Lanters somewhere in your app or game.

≪ Made with ♥ by Jeffrey Lanters ≫

Documentation

Install using npm for your JavaScript (babel) and TypeScript React Project.

$ npm install react-history-router

Example usage

import * as React from  "react";
import * as ReactDOM from 'react-dom';
import { Router } from "react-history-router";

export const routes = [{
  path: "/about",
  component: AboutView,
  data: {}  //  per route optional data
},{
  path: "/about/overview",  //  Define hardcoded before params
  component: AboutOverviewView
},{
  path: "/about/:name",  //  Make complex routes using params
  component: AboutDetailView
}];

export class AboutDetailView extends React.Component {
  render() {
    const { route, params, queries } = this.props.routing;
    return <div>
      <h1>{params.name}</h1>
      <img src={`images/${params.name}.png`} />
      <div onClick={() => Router.push('/about')}>{'About'}</div>
      <div onClick={() => Router.push('/about/jeffrey')}>{'About Jeffrey'}</div> 
      <div onClick={() => Router.push('/about/:id', { id: 'jeffrey' })}>{'About Jeffrey'}</div> 
      <div onClick={() => Router.replace('/about')}>{'About'}</div>
      <div onClick={() => Router.back()}>{'Back'}</div>
      <div onClick={() => Router.forward()}>{'Forward'}</div>
      <a href={'/about'}>{'About Classic A tag'}</div>
    </div>;
  }
}

ReactDOM.render(
  <Router 
    routes={routes} 
    onRouteWillChange={route => { }}
    onRouteDidChange={route => { }}
  />, 
  document.getElementById('root')
);