How to correctly set up nested routes so that Breadcrumbs work?

I have the following structure:
_auth.contracts.tsx
_auth.contracts.lazy.tsx
_auth.contracts_.$contractId.tsx
_auth.contracts_.$contractId.lazy.tsx

In _auth.contracts_.$contractId.tsx, I added the suffix _ to prevent the "contracts" page from rendering instead of the "contractId" page. However, because of this, I'm not getting the "contracts" page in the matches.

export const Route = createFileRoute('/_auth/contracts')({
  validateSearch: (search) => contractsSearchSchema.parse(search),
  staticData: {
    breadcrumb: 'Contracts',
  },
});

export const Route = createFileRoute('/_auth/contracts')({
  validateSearch: (search) => contractsSearchSchema.parse(search),
  staticData: {
    breadcrumb: 'Contracts',
  },
});

export const Route = createFileRoute('/_auth/contracts/$contractId')({
  staticData: {
    breadcrumb: 'Contract',
  },
});

export const Route = createFileRoute('/_auth/contracts/$contractId')({
  staticData: {
    breadcrumb: 'Contract',
  },
});

After some manipulation in Breadcrumbs with useMatches, I managed to get the following array:

[
    {
        "routeId": "__root__",
        "breadcrumb": "Home",
        "pathname": "/"
    },
    {
        "routeId": "/_auth/contracts/$contractId",
        "breadcrumb": "Contract",
        "pathname": "/contracts/55"
    }
]

[
    {
        "routeId": "__root__",
        "breadcrumb": "Home",
        "pathname": "/"
    },
    {
        "routeId": "/_auth/contracts/$contractId",
        "breadcrumb": "Contract",
        "pathname": "/contracts/55"
    }
]

And in this array, "/_auth/contracts" is missing becouse of suffix _. Can you suggest how to properly set up nested routing? I don't want contractId to render within contracts.

TanStack•3y ago•

2 replies

skinny-azure

How to correctly set up nested routes so that Breadcrumbs work?

export const Route = createFileRoute('/_auth/contracts')({
  validateSearch: (search) => contractsSearchSchema.parse(search),
  staticData: {
    breadcrumb: 'Contracts',
  },
});

export const Route = createFileRoute('/_auth/contracts')({
  validateSearch: (search) => contractsSearchSchema.parse(search),
  staticData: {
    breadcrumb: 'Contracts',
  },
});

export const Route = createFileRoute('/_auth/contracts/$contractId')({
  staticData: {
    breadcrumb: 'Contract',
  },
});

export const Route = createFileRoute('/_auth/contracts/$contractId')({
  staticData: {
    breadcrumb: 'Contract',
  },
});

After some manipulation in Breadcrumbs with useMatches, I managed to get the following array:

[
    {
        "routeId": "__root__",
        "breadcrumb": "Home",
        "pathname": "/"
    },
    {
        "routeId": "/_auth/contracts/$contractId",
        "breadcrumb": "Contract",
        "pathname": "/contracts/55"
    }
]

[
    {
        "routeId": "__root__",
        "breadcrumb": "Home",
        "pathname": "/"
    },
    {
        "routeId": "/_auth/contracts/$contractId",
        "breadcrumb": "Contract",
        "pathname": "/contracts/55"
    }
]

And in this array, "/_auth/contracts" is missing becouse of suffix _. Can you suggest how to properly set up nested routing? I don't want contractId to render within contracts.

How to correctly set up nested routes so that Breadcrumbs work?

Similar Threads

How to correctly set up nested routes so that Breadcrumbs work?

Similar Threads

Similar Threads

Similar Threads