React Location Rank Routes

A simple utility for ranking routes based on their specificity

Installation

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

Getting Started

import { ReactLocation, Router } from '@tanstack/react-location'
import { rankRoutes } from '@tanstack/react-location-rank-routes'
//
const location = new ReactLocation()
function App() {
return (
<Router
location={location}
filterRoutes={rankRoutes}
routes={[
{
path: '/',
},
{
path: '/todos',
},
{
path: '/todos/:todoId',
children: [
{
path: '/',
},
{
path: '/tasks',
},
{
path: '/tasks/:taskId',
},
{
path: '/',
},
],
},
{
path: '/',
},
]}
/>
)
}

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

const routes = [
{
path: '/',
},
{
path: '/todos/:todoId',
children: [
{
path: '/',
},
{
path: '/tasks/:taskId',
},
{
path: '/tasks',
},
{
path: '/*',
},
],
},
{
path: '/todos',
},
{
path: '/*',
},
]
Was this page helpful?

Resources

Subscribe to Bytes

The best JavaScript newsletter! Delivered every Monday to over 76,000 devs.

Bytes

No spam. Unsubscribe at any time.

© 2020 Tanner Linsley. All rights reserved.