deep-jade

Non-Nested Routes with matches and breadcrumbs

Is it possible to have a history in non nested routes to create breadcrumbs? like in 1 screenshot: 1 root 2 /planning 3 /planning/periods If I do through nested routes I need to use <Outlet /> there, i.e. /planning/periods will be rendered in the /planning component, and I don't need it.

3 Replies

deep-jadeOP•2y ago

I got it, we can do it with static data still the question is relevant, through static route does not work very well ?

other-emerald•2y ago

You can't really on build a breadcrumb navigation without there being a nested relationship between the child and parent route. You can omit/avoid having the /planning and /planning/periods components being nested with an <Outlet />, by defining the route structure as follows.

src/routes/
  planning/
    route.tsx
    index.tsx
    periods.tsx
  index.tsx

---------------------
routes/planning/route.tsx - if you have any shared loader and/or context logic it goes here

routes/planning/index.tsx - current component at /planning goes here

routes/planning/periods.tsx - current component at /planning/periods goes here

src/routes/
  planning/
    route.tsx
    index.tsx
    periods.tsx
  index.tsx

---------------------
routes/planning/route.tsx - if you have any shared loader and/or context logic it goes here

routes/planning/index.tsx - current component at /planning goes here

routes/planning/periods.tsx - current component at /planning/periods goes here

Then you can use the useMatches hook to get all the matches and filter out the ones you don't need like __root__.

fascinating-indigo•10mo ago

I'm trying to do the same thing but my project uses code-based routing and I'm having a lot of trouble. Either one route works or the other. Any tips on what might be going wrong here? to be a bit more specific, I did manage to get the correct behavior by manually adding the Outlet component to the component in the index route, but otherwise the deep route doesn't render anything. I have two routes: /sites and /sites/organizations. They're non-nested, but the latter is supposed to have breadcrumbs as if they were. Right now, I have this: sites/route.ts

export const siteManagerRoute = createRoute({
    getParentRoute: () => authRoute,
    path: "/sites/",
    component: SiteManagerPage,
});

export const siteManagerIndex = createRoute({
    getParentRoute: () => siteManagerRoute,
    path: "/sites",
    loader: ({ location }) => ({
        title: "Site Manager",
        crumb: location.pathname,
    }),
});

export const siteManagerRoute = createRoute({
    getParentRoute: () => authRoute,
    path: "/sites/",
    component: SiteManagerPage,
});

export const siteManagerIndex = createRoute({
    getParentRoute: () => siteManagerRoute,
    path: "/sites",
    loader: ({ location }) => ({
        title: "Site Manager",
        crumb: location.pathname,
    }),
});

sites/organizations/route.ts

export const manageOrganizationsRoute = createRoute({
    component: ManageOrganizationsPage,
    getParentRoute: () => siteManagerRoute,
    path: "/organizations",
    loader: ({ location }) => ({
        title: "Manage Organizations",
        crumb: location.pathname,
    }),
});

export const manageOrganizationsRoute = createRoute({
    component: ManageOrganizationsPage,
    getParentRoute: () => siteManagerRoute,
    path: "/organizations",
    loader: ({ location }) => ({
        title: "Manage Organizations",
        crumb: location.pathname,
    }),
});

within the SiteManagerPage component, I have to add a if clause to render Outlet if it's supposed to be rendering a child route, which is not nice, but it's the only I way I could get it to work. Any tips? I think I understand what's happening. Using this setup creates a sites/sites route, and it just ends up working with the Outlet component because the sites route renders the component I expect. However, I can't find the right setup since either I get a duplicate ID error, or I get an empty component in the /sites route. Not sure what to do. I guess I should also mention I have set up the route tree with this same structure. If I don't have this route tree and just have them all as siblings, of course, both routes work, but I don't get all matches (both /sites and /sites/organizations). I solved it! I had the order of things mixed up and the paths wrong. Here's the solution if anyone stumbles into this in the future:

export const siteManagerRoute = createRoute({
    getParentRoute: () => authRoute,
    path: "/sites",
    loader: ({ location }) => ({
        title: "Site Manager",
        crumb: location.pathname,
    }),
});

export const siteManagerIndex = createRoute({
    path: "/",
    component: SiteManagerPage,
    getParentRoute: () => siteManagerRoute,
});

export const siteManagerRoute = createRoute({
    getParentRoute: () => authRoute,
    path: "/sites",
    loader: ({ location }) => ({
        title: "Site Manager",
        crumb: location.pathname,
    }),
});

export const siteManagerIndex = createRoute({
    path: "/",
    component: SiteManagerPage,
    getParentRoute: () => siteManagerRoute,
});

export const manageOrganizationsRoute = createRoute({
    component: ManageOrganizationsPage,
    getParentRoute: () => siteManagerRoute,
    path: "/organizations",
    loader: ({ location }) => ({
        title: "Manage Organizations",
        crumb: location.pathname,
    }),
});

export const manageOrganizationsRoute = createRoute({
    component: ManageOrganizationsPage,
    getParentRoute: () => siteManagerRoute,
    path: "/organizations",
    loader: ({ location }) => ({
        title: "Manage Organizations",
        crumb: location.pathname,
    }),
});

Gaming

Programming

Non-Nested Routes with matches and breadcrumbs

Did you find this page helpful?