Rendering a Component for Exact Matches and then Rendering Children on Subsequent Navigation

[schoggatt]

I have been working through implementing a router that has a series of parameterized routes and I am curious how to handle routes that serve as a standalone page. But, also need to be the standalone outlet for its children. An close example would be like:

book/$bookId

book/$bookId/page/$pageId

book/$bookId/page/$pageId then has its series of children that may show different facets of the page. I wanted to create breadcrumbs that allow you to navigate back through. I have been attempting to use the loader function on the routes to pass a crumb that I can name. Then through the useRouterState() I can generate all the breadcrumbs in a nice little component. The problem is that my parent book route is dual purpose. It displays the book information and also serves as the parent to all the page routes. This is because I wanted to generate that breadcrumb trail dynamically with useMatches() which uses that child parent relationship.

Because of this, I have found that only my parent routes content is shown, or if I make that a simple outlet, only the children content is shown. The ideal world is that I can show the content of book/$bookId on an exact match and then on later routing to book/$bookId/page I can use the outlet to only display the childrens content. So far, the only way I have been able to accomplish this is though something like this in the parent route:

const BookViewFork = () => {
  const isBookPage = useMatch({
    from: '/book/$bookId/_page/page/$pageId',
    shouldThrow: false,
  })
    ? true
    : false;

  return isBookPage ? <Outlet /> : <BookView />;
};

While this works, I feel like it is a mediocre solution at best. I was wondering if anyone has found any better solutions? This seems like an odd approach for something that seems relatively simple.

Another solution I thought of but had other issues with:

Seperating the BookView into another route. For example, book/$bookId/home while the other children derive from book/$bookId. Then I get the breadcrumb from the parent and since its just an outlet it will function correctly. But, then if I attempt to navigate backwards from page it would go to book/$bookId which is just an outlet. I then attempted a redirect from book/$bookId. But, getting that bookId to route to book/$bookId/home ended up being an issue.

[schiller-manuel]

you need to add an index route

add book/$bookId/index.tsx (in case you are using file based routing)

this will serve as the "standalone page"