Lightweight router for React

Instalation

npm i -s best-react-router

Quick start

app.js:

import React from 'react';
import Layout from './layout';
import { render } from 'react-dom';
import { createRouter, RouterProvider } from 'best-react-router';

const router = createRouter({
  routes: [
    {
      path: '/',
      component: () => import('./Home')
    },
    {
      path: '/me/about',
      component: () => import('./About')
    }
  ]
});

function App() {
  return (
    <RouterProvider router={router}>
      <Layout />
    </RouterProvider>
  );
}

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

layout.js:

import React from 'react';
import { RouterView, RouterLink } from 'best-react-router';

function Layout() {
  return (
    <div className="app">
      <nav>
        <ul>
          <li>
            <RouterLink to={{ path: '/' }}>
              Home
            </RouterLink>
          </li>
          <li>
            <RouterLink to={{ path: '/me/about' }}>
              Cool stuff about me
            </RouterLink>
          </li>
        </ul>
      </nav>
      <RouterView />
    </div>
  );
}

export default Layout;

Links

const router = createRouter({
  routes: [
    {
      name: 'home',
      path: '/',
      component: () => ...
    },
    {
      name: 'about',
      path: '/about',
      component: () => ...
    }
  ]
});

function Page() {
  return (
    <RouterLink to={{ path: '/' }}>
      Home
    </RouterLink>
    <RouterLink to={{ path: '/about' }}>
      About
    </RouterLink>
  );
}

function Page() {
  return (
    <RouterLink to={{ name: 'home' }}>
      Home
    </RouterLink>
    <RouterLink to={{ name: 'about' }}>
      About
    </RouterLink>
  );
}

Route params

const router = createRouter({
  routes: [
    {
      path: '/page/:slug',
      component: () => Page
    }
  }
});

import { useCurrentRoute } from 'best-react-router'

export function Page() {
  const route = useCurrentRoute();

  return (
    <div className="page-2">
      <h1>
        This is Page with slug {route.params.slug}.
      </h1>
    </div>
  );
}

Transition

<RouterView transition={{
  duration: 0.4,
  style: {
    enterActive: {},
    enter: {
      opacity: 0
    },
    enterTo: {
      opacity: 1
    },
    leaveActive: {},
    leave: {
      opacity: 1
    },
    leaveTo: {
      opacity: 0
    }
  }
}} />

Route meta and route watcher

The meta property of the route configuration can have a custom value.

const router = createRouter({
  routes: [
    {
      name: 'home',
      path: '/',
      component: () => Page,
      meta: {
        title: 'Page 1'
      }
    }
  ]
})

import { useRouteWatcher } from 'best-react-router'

function Page() {
  useRouteWatcher((from, to) => {
    if (document && to.meta) {
      document.title = to.meta.title
    }
  })

  ...
}

Examples

• Basic example
• Route params
• Transition
• Middleware
• Route watcher & meta data

Tests

Running e2e tests:

npm run examples && npm run test:e2e

Drivers included in e2e tests:

• chrome
• firefox

License

The code is under MIT license.