extended-salmon

Nested Routes that varies between Outlet and specified components

Hello! I created a sample code below https://stackblitz.com/edit/github-gvqtql How would I restructure this so that /foo/bax/baz will render as it's own page and not as an Outlet on /foo while keeping /foo/bar and /foo/bax rendered on the /foo. Thank you so much!!

imjayes

StackBlitz

Router Quickstart File Based Example - StackBlitz

Run official live example code for Router Quickstart File Based, created by Tanstack on StackBlitz

4 Replies

fair-rose•2y ago

src/routes
  foo.bar.tsx
  foo.bax.tsx
  foo_.bax.baz.tsx <- not nested in the shared /foo stuff

src/routes
  foo.bar.tsx
  foo.bax.tsx
  foo_.bax.baz.tsx <- not nested in the shared /foo stuff

extended-salmonOP•2y ago

Thank you so much. I followed your suggestion to separate the baz from the shared foo and it worked. This helps a lot. Thank you! Hi again! Sorry I have a problem with the current solution. So I use useMatches to create a breadcrumb component. But the problem with the current solution is that baz doesn't actually go through the foo > bax > baz route. So useMatches will just return a route of root > foo/bax/baz instead of a trail of the whole thing https://stackblitz.com/edit/github-gvqtql-hnbv5v I modified the original sample code to use the solution. Then I added a test route just to check the difference in what the useMatches will return. I was hoping for baz to get the same matches as test if possible. Thank you!!

fair-rose•2y ago

That wouldn't really be possible, since you are choosing to render a route outside of the /foo tree. How the useMatches hook works, is that it looks at what routes are actually being rendered right now. Since your requirement was to have /foo/bax/baz not be a part of the /foo route, when you go to /foo/bax/baz you aren't rendering any of the other routes. This would probably be the hacky way to do it, but I'd highly recommend against doing so, since you'd still be running loaders and etc. So to actually retain the matching functionality but not render the UI would probably need you to do alot of conditional checking on the ui level.

const FooLayout = () => {
  const match = useMatch({ from: '/foo/bax/baz' })
  
  if (match) {
    return <My_Standalone_UI />
  }  

  return <My_Shared_UI />
}

const FooLayout = () => {
  const match = useMatch({ from: '/foo/bax/baz' })
  
  if (match) {
    return <My_Standalone_UI />
  }  

  return <My_Shared_UI />
}

You'd probably be better off manually passing in the breadcrumb props instead, since at /foo/bax/baz, you know exactly the path to get there.

extended-salmonOP•2y ago

Okay okay, I figured it'd be those two options. I was hoping real hard there's another way to structure the routes so that it's possible 😅 I might just maybe set a context variable or something just to know the route is using this kind of structure, just in case something changes in the future. Thank you very much for your time! I appreciate this so much, and it really helped me a lot. Thank you!

Gaming

Programming

Nested Routes that varies between Outlet and specified components

Did you find this page helpful?