solid-orange

Getting current routeId

I'm sure I'm missing something, but reading through the docs and testing things, I cannot figure out how to get the current routeId within a component (and to have that value reactive / re-render the component). Can anybody point me in the right direction?

23 Replies

ratty-blush•10mo ago

there is not necessarily a single "current" routeId as multiple routes might match the current path you can get the closest match or all matches using useMatch or useMatches

solid-orangeOP•10mo ago

im attempting to style a list of buttons depending on the route, and for mobile display the correct <option> in a <select>. these are all child routes of a "root layout" route. maybe i need to read more how match works? its confusing to me to have to pass in the route to that function (from) when the whole reason im using it is i dont know the route im on. what youre saying regarding "many routes can match" makes some sense though

ratty-blush•10mo ago

useMatch({strict: false}) should return the closest match i think

solid-orangeOP•10mo ago

const routeId = useMatch({strict: false,select: (match) => match.routeId}); i did that in my layout, but it never changes

ratty-blush•10mo ago

probably the closest match is not changing then?

solid-orangeOP•10mo ago

/settings /settings/example /settings/example-2 navigating around, always stays at /settings im sure im doing something wrong here, just very confused. doesn't seem like it should be a difficult thing

ratty-blush•10mo ago

https://stackblitz.com/edit/tanstack-router-wk3wuw63?file=src%2Froutes%2F__root.tsx&preset=node

Manuel Schiller

StackBlitz

Router Kitchen Sink File Based Example (forked) - StackBlitz

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

ratty-blush•10mo ago

 const closest = useMatch({ strict: false, select: (match) => match.routeId });
  const leaf = useMatches({
    select: (matches) => matches[matches.length - 1].routeId,
  });

 const closest = useMatch({ strict: false, select: (match) => match.routeId });
  const leaf = useMatches({
    select: (matches) => matches[matches.length - 1].routeId,
  });

you probably need the leaf then

solid-orangeOP•10mo ago

i was just wondering about that. if im reading right, basically ill get a list of matches and the last one in the list is actually the closest match?

ratty-blush•10mo ago

by "closest" I meant "physically" closest in the react tree

solid-orangeOP•10mo ago

"highest up" basically?

ratty-blush•10mo ago

no it depends where you call the useMatch hook

solid-orangeOP•10mo ago

ok thats another thing i was wondering, hah i think im understanding b/c im using it in the layout component, the closest is the layout

ratty-blush•10mo ago

yep

solid-orangeOP•10mo ago

that appears to work ill have to remember to reference that kitchen sink example

ratty-blush•10mo ago

have a look at the devtools as well

solid-orangeOP•10mo ago

good thought

ratty-blush•10mo ago

it shows you the match hierachy

solid-orangeOP•10mo ago

ok, great thank you so much. knowing how this actually works now should help a ton i think i had certain assumptions that were just incorrect

ratty-blush•10mo ago

we have some docs but they might need improvement https://tanstack.com/router/v1/docs/framework/react/guide/route-matching

Route Matching | TanStack Router React Docs

Route matching follows a consistent and predictable pattern. This guide will explain how route trees are matched. When TanStack Router processes your route tree, all of your routes are automatically s...

ratty-blush•10mo ago

if you can and want, any help to the docs is apprectiated

solid-orangeOP•10mo ago

as a noobie to the library, i think all the "match" hooks are a bit confusing to grok. i had assumed id be able to call into a simple hook to literally just "get the route im on". i will definitely take some notes on what ive been confused with as i learn more. the docs are definitely a beast but im sure a lot of it is me as well really, really appreciate your help and time. thank you again

ratty-blush•10mo ago

happy building!

Gaming

Programming

Getting current routeId

Did you find this page helpful?