Basic file-based example layout-b loses active state

[IanVS]

Which project does this relate to?

Router

Describe the bug

I am learning how to use tanstack-router, and was looking at the basic file-based example. I noticed that when navigating to layout-b, the active styles are lost in the navigation bar at the top. It seems this is because Layout is directly linking to layout-a, so when /layout-b is visited, it's no longer active.

I think this example should be improved to demonstrate how one might keep the nav link active, while still navigating to sub-routes. I suppose the way this would be done in practice is to add a layouts.tsx without the prefix, and then both layout-a and layout-b would be nested under that, right?

Or maybe I'm missing the point, and the whole idea of this section of the example is to show that prefixed layouts are not considered in the URL.

Your Example Website or App

https://tanstack.com/router/latest/docs/framework/react/examples/basic-file-based

Steps to Reproduce the Bug or Issue

Go to the example, click Layout, then in the page, click "Layout B". The active styles are lost from "Layout" at the top of the page.

Expected behavior

I expected "Layout" to not lose its active styles.

Screenshots or Videos

No response

Platform

NA

Additional context

No response

[IanVS]

Also, I don't think this is worth a separate issue, but the quick-start also seems to assume the use of tailwind.

https://tanstack.com/router/latest/docs/framework/react/quick-start#manual-setup

className="[&.active]:font-bold" has no effect when not using tailwind.