React Location Rank Routes

A simple utility for ranking routes based on their specificity

Installation

1 yarn add @tanstack/react-location-rank-routes
2 # or
3 npm i @tanstack/react-location-rank-routes

Getting Started

1 import { ReactLocation, Router } from '@tanstack/react-location'
2 import { rankRoutes } from '@tanstack/react-location-rank-routes'
3 
4 //
5 
6 const location = new ReactLocation()
7 
8 function App() {
9   return (
10     <Router
11       location={location}
12       filterRoutes={rankRoutes}
13       routes={[
14         {
15           path: '/',
16         },
17         {
18           path: '/todos',
19         },
20         {
21           path: '/todos/:todoId',
22           children: [
23             {
24               path: '/',
25             },
26             {
27               path: '/tasks',
28             },
29             {
30               path: '/tasks/:taskId',
31             },
32             {
33               path: '/',
34             },
35           ],
36         },
37         {
38           path: '/',
39         },
40       ]}
41     />
42   )
43 }

The Routes above will be filtered and ranked in the following order:

1 const routes = [
2   {
3     path: '/',
4   },
5   {
6     path: '/todos/:todoId',
7     children: [
8       {
9         path: '/',
10       },
11       {
12         path: '/tasks/:taskId',
13       },
14       {
15         path: '/tasks',
16       },
17       {
18         path: '/*',
19       },
20     ],
21   },
22   {
23     path: '/todos',
24   },
25   {
26     path: '/*',
27   },
28 ]