mute-gold

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

genetic-orange•8mo 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

mute-goldOP•8mo 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

genetic-orange•8mo ago

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

mute-goldOP•8mo ago

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

genetic-orange•8mo ago

probably the closest match is not changing then?

mute-goldOP•8mo 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

genetic-orange•8mo 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

genetic-orange•8mo 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

mute-goldOP•8mo 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?

genetic-orange•8mo ago

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

mute-goldOP•8mo ago

"highest up" basically?

genetic-orange•8mo ago

no it depends where you call the useMatch hook

mute-goldOP•8mo 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

genetic-orange•8mo ago

yep

mute-goldOP•8mo ago

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

genetic-orange•8mo ago

have a look at the devtools as well

mute-goldOP•8mo ago

good thought

genetic-orange•8mo ago

it shows you the match hierachy

mute-goldOP•8mo 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

genetic-orange•8mo 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...

genetic-orange•8mo ago

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

mute-goldOP•8mo 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

genetic-orange•8mo ago

happy building!

Gaming

Programming

Getting current routeId

Did you find this page helpful?