toy-react-router

Use routing by component in React SPA

Install

$ npm i toy-react-router
or
$ yarn add toy-react-router

Guide

• Demo
  • Practice using toy-react-router in CodeSandbox
• Quick Start

import React from "react";
import { Router, Route, Link, Switch } from "toy-react-router";

const App = () => {
  return (
    <Router>
      <Switch>
        <Route path="/" exact>
          This is MainPage
          <Link to="/1">to page 1</Link>
        </Route>
        <Route path="/1">
          This is Page 1
          <Link to="/2">to page 2</Link>
        </Route>
        <Route path="/2">
          This is Page 2
          <Link to="/">to mainpage</Link>
        </Route>
        <Route> No Match </Route>
      </Switch>
    </Router>
  );
};

export default App;

• Component
  • Router : The common low-level interface for all router components.
  • Route : Render when its path matches the current URL.
    • path: string
    • exact: boolean
      • When true, will only match if the path matches the location.pathname exactly.
  • Switch : Renders the first child <Route> that matches the location.
  • Link : Acts similar to <a> tag without refresh.
    • to: string
  • Redirect : Rendering a will navigate to a new location.
    • to: string

Misc

• This library get inspired by react-router-dom and just clone it
• All components in thie library implemented by me, so many features acts be inferior to origin react-router, such as overlapping <Route> component

To be updated

• Component
  • Switch
  • Redirect
• feature
  • exact path in Route
  • path="*" in Route
• Hook
  • useParams
  • useHistory
• Guide
  • add how to use components
  • add some GIF of each component demo
• Apply TypeScript
  • convert Router.jsx to Router.tsx
  • npm publish with TypeScript