naive-router

Super naive dependency free router for React

Usage

This library two components : Route and NotFound.

A Route will display its children if an only current browser route matches its path prop.

Route matching without parameters

import { Route } from "naive-router";
// ...
<Route path="/foo/bar">
  <div>Matched /foo/bar route</div>
</Route>

Route matching with path paremeters

import { Route } from "naive-router";
// ...
const Child = ({id}) => <div>Matched route "/foo/{id}" with {id}</div>
<Route path="/foo/{id}">
  <Child />
</Route>

Route with render function as a child

Child of the route component can be a render function. This function will be invoked with two arguments : path and query parameters.

import { Route } from "naive-router";
// ...
const Child = ({id}) => <div>Matched route "/foo/{id}" with {id}</div>
<Route path="/foo/{id}">
  {(pathParameters, queryParemeters) => <div>{pathParameters.id} {queryParameters.id}</div>}
</Route>

NotFound route

It's possible to display a special route when no Route component has been matched.

import { Route, NotFound } from "naive-router";
// ...
const Child = ({id}) => <div>Matched route "/foo/{id}" with {id}</div>
<>
  <Route path="/foo/{id}">
    {(pathParameters, queryParemeters) => <div>{pathParameters.id} {queryParameters.id}</div>}
  </Route>
  <NotFound>
    <div>Not found !</div>
  </NotFound>
</>

As for Route component, it's possible to have more than one NotFound component. Each one of them will be display when no Route is matched.

Pitfalls

This library comes with some pitfalls :

• It monkey-patch window.history methods : pushState, go, back, replaceState and forward to broadcats any location change to every Route component.
• Route components pass path and query parameters as props to child components. Thus there is a risk of name conflict. The priority order is : 1) path parameters 2) query parameters 3) props. Passing a render function as a children to the Route component solve this issue.
• Several Route components could match a given url (for instance both /foo/bar matches routes /foo/bar and /foo/{id}). You should think about the Route component as a conditional display of its children based on the route.

Features

• Route matching
• Path parameters support
• Query parameters support
• 404 Route
• Nested routes