T
TanStack•2y ago
other-emerald

how to get current url in the layout route?

I have a layout route and depending on the current url i'd like to highlight my menu
2 Replies
other-emerald
other-emeraldOP•2y ago
https://tanstack.com/router/latest/docs/framework/react/guide/navigation#:~:text=The%20hook%20version%20useMatchRoute%20returns%20a%20function%20that%20can%20be%20called%20programmatically%20to%20check%20if%20a%20route%20is%20matched%3A
Navigation | TanStack Router Docs
Everything is Relative Believe it or not, every navigation within an app is relative, even if you aren't using explicit relative path syntax (../../somewhere). Any time a link is clicked or an imperative navigation call is made, you will always have an origin path and a destination path which means you are navigating from one route to another ...
ambitious-aqua
ambitious-aqua•2y ago
Have you tried? 
const location = useRouterStore({ select: (state) => state.location })
const location = useRouterStore({ select: (state) => state.location })
From there on you could match it? If your menu is using the <Link / component from Tanstack Router, you then get this for free, either by using activeProps or by checking for the data attribute. 
<Link to='/my-route' activeProps={{ className: 'font-bold' }}>foo</Link>
//or
<Link to='/my-route' className='data-[status=active]:font-bold'>foo</Link>
<Link to='/my-route' activeProps={{ className: 'font-bold' }}>foo</Link>
//or
<Link to='/my-route' className='data-[status=active]:font-bold'>foo</Link>

Did you find this page helpful?