React Location Rank Routes

A simple utility for ranking routes based on their specificity

Installation

yarn add react-location-rank-routes
# or
npm i react-location-rank-routes

Getting Started

import { ReactLocation, Router } from 'react-location'
import { rankRoutes } from '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 our newsletter

The latest TanStack news, articles, and resources, sent to your inbox.

    I won't send you spam.

    Unsubscribe at any time.

    © 2020 Tanner Linsley. All rights reserved.