router-component-lite

a basic routing component for react components, the API are much like of react-router

Install

npm install --save router-component-lite

API

Router

The whole should be wrapped in this component because it carries the Provider which knows about all your states

  <Router>
    // Your children should be wrapped here this includes <Route />
  </Router>

Route

This checks if the given path matches the pathname and renders the given children

  <Route path='/pathname'>
    // Component to mount should be here
  </Route>

Link

This is used to link to a given path and should only be used in a component that's wrapped in a <Route>

  <Link path=''>name of link</Link>

Usage

// can be used in class based components
import React, { Component } from "react";

import { Router, Route, Link } from "router-component-lite";

class Example extends Component {
  render() {
    return (
      <Router>
        <Route path="/">
          <div>
            You are on home
            <Link path="/users">click to go to users</Link>
          </div>
        </Route>
        <Route path="/users">
          <div>
            <Link path="/">Go to Home</Link>
          </div>
        </Route>
        <Route path="/profile">
          <div>profile</div>
        </Route>
      </Router>
    );
  }
}

// if you can prefer, you can use it in a functional component

function Example() {
  return (
    <Router>
      <Route path="/">
        <div>
          You are on home
          <Link path="/users">click to go to users</Link>
        </div>
      </Route>
      <Route path="/users">
        <div>
          <Link path="/">Go to Home</Link>
        </div>
      </Route>
      <Route path="/profile">
        <div>profile</div>
      </Route>
    </Router>
  );
}

This package was made out of curiosity on how routing and context API work together, it is not stable for production

License

MIT © OlivierJM