How to check if a given path has a valid page

[Jervx]

I am building a breadcrumb component where I want only those paths that have valid pages to be clickable.

Route Definitions

Here’s my route definition:

import { createRoute, lazyRouteComponent } from '@tanstack/react-router'

import { rootRoute } from '@/root-route'

const adminRoute = createRoute({
    getParentRoute: () => rootRoute,
    path: 'admin',
    component: lazyRouteComponent(() => import('./layout')),
})

// Other route definitions...

const adminViewCompaniesRoute = createRoute({
    getParentRoute: () => adminRoute,
    path: 'companies-management/view-companies',
    component: lazyRouteComponent(
        () => import('./pages/companies-management/view-companies')
    ),
})

const adminViewCompanyBranchesRoute = createRoute({
    getParentRoute: () => adminRoute,
    path: 'companies-management/view-companies/$companyId/view-branches',
    component: lazyRouteComponent(
        () => import('./pages/companies-management/company-branches')
    ),
})

const AdminRoute = adminRoute.addChildren([    adminViewCompaniesRoute,    adminViewCompanyBranchesRoute,])

export default AdminRoute

Here’s the breadcrumb logic I am currently using:

const router = useRouterState()
const pathName = router.location.pathname

const matches = router.matches

logger.log(matches)

const paths = useMemo(() => {
  const paths: { name: string; urlPath: string; isClickable: boolean }[] = []
  const components = pathName.split('/').filter((path) => path)

  let currentPath = ''

  components.forEach((component) => {
      currentPath += '/' + component
      paths.push({
          name: component,
          urlPath: currentPath,
          isClickable: matches.some((match) => match.id === currentPath),
      })
  })

    return paths
}, [pathName, matches])

logger.log(paths)

**/

Example Scenario

I am currently at this path: /admin/companies-management/view-companies

// Matches

[
    {
        "id": "__root__",
        "index": 0,
        "routeId": "__root__",
        "pathname": "/",
        "fullPath": "/",
        ...other
    },
    {
        "id": "/admin",
        "index": 1,
        "routeId": "/admin",
        "pathname": "/admin",
        "fullPath": "/admin",
        ...other
    },
    {
        "id": "/admin/companies-management/view-companies",
        "index": 2,
        "routeId": "/admin/companies-management/view-companies",
        "pathname": "/admin/companies-management/view-companies",
        "fullPath": "/admin/companies-management/view-companies",
        ...other
    }
]



// Generated Breadcrumb Items

[
    {
        "name": "admin",
        "urlPath": "/admin",
        "isClickable": true
    },
    {
        "name": "companies-management",
        "urlPath": "/admin/companies-management",
        "isClickable": false // This should be false
    },
    {
        "name": "view-companies",
        "urlPath": "/admin/companies-management/view-companies",
        "isClickable": true
    }
]

This looks fine for now, but when I go to /admin/companies-management/view-companies/1/view-branches the generated breadcrumb items becomes

// Matches
[
    {
        "id": "__root__",
        "routeId": "__root__",
        "params": { "companyId": "1" },
        "pathname": "/",
        "fullPath": "/",
        ...other
    },
    {
        "id": "/admin",
        "routeId": "/admin",
        "params": { "companyId": "1" },
        "pathname": "/admin",
        "fullPath": "/admin",
        ...other
    },
    {
        "id": "/admin/companies-management/view-companies/1/view-branches",
        "routeId": "/admin/companies-management/view-companies/$companyId/view-branches",
        "params": { "companyId": "1" },
        "pathname": "/admin/companies-management/view-companies/1/view-branches",
        "fullPath": "/admin/companies-management/view-companies/$companyId/view-branches",
        ...other
    }
]


// Generated Breadcrumb Items
[
    {
        "name": "admin",
        "urlPath": "/admin",
        "isClickable": true // This should be true
    },
    {
        "name": "companies-management",
        "urlPath": "/admin/companies-management",
        "isClickable": false
    },
    {
        "name": "view-companies",
        "urlPath": "/admin/companies-management/view-companies",
        "isClickable": false // This should be true since I defined a page for this
    },
    {
        "name": "1",
        "urlPath": "/admin/companies-management/view-companies/1", 
        "isClickable": false // This should be false since I did not define a page for this
    },
    {
        "name": "view-branches",
        "urlPath": "/admin/companies-management/view-companies/1/view-branches",
        "isClickable": true
    }
]

How do I ensure that only paths corresponding to valid pages are clickable in the breadcrumbs? Is there a better way of doing this? Thank you for help 😇🙏🏽