typesafe-react-routes

A set of types and utility functions to simplify routing using types in react-router. Inspired by typesafe-react-router.

This package will protect your project from incorrect route declaration.

Installation

npm install typesafe-react-routes

Motivation

Typifies give necessary type for a route and errors with incorrect usage
Allows you to specify query parameters that should be used inside the route
Allows you not to forget named parameters, will work out the TypeScript error when creating
You can add a new section of route with extendWith and create routes tree (or something like)
You can add the required query params with withQueryParams to protect list pages with required params

API

This package presents only two methods route and param

`param()`

A method to separate static parts of route and dynamic:

import { route, param } from 'typesafe-react-routes';

route('item', param('id')); // Static part – item, dynamic part – id
route('item', param('category'), param('id')); // Static part – item, dynamic parts – id and category

`route()`

The main method to create a typesafe route in react-router Includes methods withQueryParams, extendWith, create and template

`withQueryParams()`

Add required query params to your route:

import { route } from 'typesafe-react-routes';

route('item').withQueryParams('id'); // Now you should set query param 'id' for this route
route('items').withQueryParams('page'); // Now you should set query param 'page' for this route

`extendWith()`

Allows you to create several routes from one parent (base) route:

import { route, param } from 'typesafe-react-routes';

const items = route('items'); // Base route
const edit = items.extendWith(param('id')); // Extended route for edit page
const list = items.extendWith(param('tab')); // Extended route for list page

`create()`

Protect you from incorrect route declaration:

import { route, param } from 'typesafe-react-routes';

route('item').create({}); // No errors

route('item', param('id')).create({}); // Error, forget param id
route('item', param('id')).create({ id: '1' }); // Correct route creation

route('item').withQueryParams('id').create({}); // Error, forget query param id
route('item').withQueryParams('id').create({}, { id: 1 }); // Correct route creation

`template()`

Return a template for routing for Route or Redirect component for example:

import { route, param } from 'typesafe-react-routes';

route('item').template(); // Returns /item
route('item', param('id')).template(); // Returns /item/:id
route('item').withQueryParams('id').template(); // Returns /item

Example of usage

Initialize routes

import { route, param } from 'typesafe-react-routes';

const items = route('items');
const itemsEdit = items.extendWith(param('id'));
const itemsList = route('items', param('tab')).withQueryParams('page');

Usage in react-router

items.template() converts to /items
itemsEdit.template() converts to /items/:id
itemsList.template() converts to /items/:tab

import { Route, Redirect, Switch } from 'react-router-dom';

<Switch>
  <Route path={itemsList.template()} component={ListPage} />
  <Route path={itemsEdit.template()} component={EditPage} />

  <Redirect path={items.template()} to={itemsList.create({ tab: 'some_tab' })} />
</Switch>;

Usage in links

items.create({}) converts to /items
- No errors, it's a simple route without params or query
itemsEdit.create({ id: '1' }) converts to /items/1
- You'll have an error for required part id
itemsList.create({ tab: 'some_tab' }, { page: 1 }) converts to /items/some_tab?page=1
- You'll have errors for required part tab and required query param page

<a href={items.create({})}>Root</a>
<a href={itemsEdit.create({ id: '1' })}>Edit</a>
<a href={itemsList.create({ component: 'tab' }, { page: '1' })}>List</a>