1.0.3 • Published 1 year ago
typesafe-react-routes v1.0.3
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 /itemsitemsEdit.template()
converts to /items/:iditemsList.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
- You'll have an error for required part
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 parampage
- You'll have errors for required part
<a href={items.create({})}>Root</a>
<a href={itemsEdit.create({ id: '1' })}>Edit</a>
<a href={itemsList.create({ component: 'tab' }, { page: '1' })}>List</a>