router

Just a router for react

WARNING 🏗 This router is in active development and is not fully tested or documented...yet 🚧

Features

• 🛠 Hooks and functions all the way down — no ES6 classes to be found
• 🌳 Tree-shakable (ESM w/ no side effects)
• 🚫 0 dependencies
• 🐜 Tiny footprint
• 🚟 Suspense aware
• 📘 TypeScript friendly

Prior Art / Credit

This router began as a fork of @reach/router so the API is about the same.

Installation

With npm

$ npm install @chrstntdd/router

With yarn

$ yarn add @chrstntdd/router

Basic Example

import React from 'react'
import ReactDOM from 'react-dom'

import { Router, Link } from '@chrstntdd/router'

function Loading() {
  return <div>Loading...</div>
}

function FallbackRoute() {
  return (
    <div>
      <h1>Route not found</h1>
      <br />
      <Link to="/">Back home</Link>
    </div>
  )
}

const Home = React.lazy(() => import(/* webpackChunkName: "home" */ './Home'))
const PageTwo = React.lazy(() => import(/* webpackChunkName: "page-two" */ './PageTwo'))

function App() {
  return (
    <main>
      <React.Suspense fallback={<Loading />}>
        <div>
          <Router>
            <Home path="/" />
            <PageTwo path="/page-two" />
            <FallbackRoute default />
          </Router>
        </div>
      </React.Suspense>
    </main>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))

Considerations

The published code depends on Object.assign() support and requestAnimationFrame. If your environment does not support these browser features, then you must provide your own polyfills.

React ships with an Object.assign() polyfill. source