# bare-routes

> A bare-bones React client-side page router that delegates the actual routing and page loading to user code and only handles history manipulation

Latest version **0.3.2** (published 2021-06-06) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install bare-routes
pnpm add bare-routes
yarn add bare-routes
bun add bare-routes
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.3.2 |
| Published | 2021-06-06 |
| First published | 2021-05-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 20.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Fatih Aygün |
| Maintainers | cyco130 |
| Keywords | router, react |

## Links

- npm: https://www.npmjs.com/package/bare-routes
- Repository: https://github.com/cyco130/bare-routes
- Homepage: https://github.com/cyco130/bare-routes#readme
- Issues: https://github.com/cyco130/bare-routes/issues
- npm.io page: https://npm.io/package/bare-routes

## Dependencies (1)

- [@types/react](https://npm.io/package/@types/react.md) ^17.0.5

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.3.2 (latest) — 2021-06-06
- 0.3.1 — 2021-06-06
- 0.3.0 — 2021-06-06
- 0.2.6 — 2021-05-23
- 0.2.5 — 2021-05-23
- 0.2.4 — 2021-05-23
- 0.2.3 — 2021-05-23
- 0.2.2 — 2021-05-15
- 0.2.1 — 2021-05-14
- 0.2.0 — 2021-05-14
- 0.1.0 — 2021-05-11
- 0.0.1 — 2021-05-10

## README

# bare-routes

`bare-routes` is a bare-bones client-side router for [React](https://reactjs.org) web applications. It doesn't provide any means for matching routes, fetching data or dynamically importing modules. _You_ do all that in your `render` callback. `bare-routes` only handles the history API and the scroll position restoration.

**DO NOT USE IN PRODUCTION. This is still in early development. The API will almost certainly change -probably multiple times- before it reaches version 1.0.**

## Why?
[react-router](https://reactrouter.com/) is very powerful but its dynamic way of routing makes it difficult to determine the data needed for the next page and fetch it before rendering. [Next.JS](https://nextjs.org/) has a filesystem based router that works like a charm but I can't help but feel it's an overkill for small projects. Yet it's also too opinionated for some use cases like localized URL segments or multitenant apps with an occasional tenant specific route.

## Installation
```sh
npm install --save bare-routes
```

## Usage
Let's say you have a very simple web app with three pages, each page represented by a React component:

| Path     | Component   |
| -------- | ----------- |
| `/`      | `HomePage`  |
| `/news`  | `NewsPage`  |
| `/about` | `AboutPage` |

You would do something like this:

```jsx
import React from "react";
import { Router, Link } from "bare-routes";

const App = () => (
  <Router
    render={({ url /* a URL object instance */ }) => {
      // Map path to component
      const Component = {
        "/": HomePage,
        "/news": NewsPage,
        "/about": AboutPage,
      }[url.pathname] || NotFoundPage;

      return (
        <div>
          {/* This navigation menu will be shared by all pages */}
          <nav>
            <ul>
              <li><Link href="/">Home</Link></li>
              <li><Link href="/news">News</Link></li>
              <li><Link href="/about">About</Link></li>
              <li><Link href="/404">Broken link</Link></li>
            </ul>
          </nav>
          <Component />
        </div>
      );
    }}
  >
    Loading...
  </Router>
);

const HomePage = () => <p>This is the home page</p>;
const NewsPage = () => <p>This is the news page</p>;
const AboutPage = () => <p>This is the about page</p>;

const NotFoundPage = () => <p>Not found</p>;
```

A more involved scenario would look like this:

```jsx
const App = () => (
    <Router
        // Render callback can return a Promise (so it can use async logic)
        render={async ({ url }) => {
            try {
                // findModuleNameForUrl is a hypothetical function for matching
                // URLs with modules that default export a page component
                const moduleName = findModuleNameForUrl(url);

                // All modern bundlers support something like this:
                const pageModule = await import(`./pages/${moduleName}`);

                // Extract the page component and render it
                const PageComponent = pageModule.default;
                return <PageComponent />;
            } catch (error) {
                // Render callback should not throw and if returns a Promise
                // it should not reject.
                return <p>Could not load page: {error.message}</p>;
            }
        }}
    >
        Loading...
    </Router>
);
```

## TO DO
- LinkContainer
- Redirect
- Scroll restoration
- Navigation blocking

---
_Source: https://npm.io/package/bare-routes · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._