T
TanStack•2y ago
extended-salmon

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.
2 Replies
evident-indigo
evident-indigo•2y ago
You could do this. 
_auth.contracts.tsx // just return an <Outlet /> here
_auth.contract.index.tsx // route config
_auth.contract.index.tsx // code-split component
_auth.contracts_.$contractId.tsx
_auth.contracts_.$contractId.lazy.tsx
_auth.contracts.tsx // just return an <Outlet /> here
_auth.contract.index.tsx // route config
_auth.contract.index.tsx // code-split component
_auth.contracts_.$contractId.tsx
_auth.contracts_.$contractId.lazy.tsx
Move all the UI and route configuration from _auth.contracts.tsx to _auth.contracts.index.tsx, and just render an <Outlet /> at the former.
extended-salmon
extended-salmonOP•2y ago
Okay, thank you, I will try.

Did you find this page helpful?