foreign-sapphire

How to match activeProps for all nested route

I have a path abc/*, I want to activeProps active with all nested path after abc/

1 Reply

extended-salmon•2y ago

Would this solve it?

<Link to='/abc'>foo</Link>

<Link to='/abc'>foo</Link>

A link is considered active, if it is being matched in your routeTree. So this link will be active, if your are on any of routes that match it.

/abc
/abc/1
/abc/1/foo/..../bar

/abc
/abc/1
/abc/1/foo/..../bar

This does require you to have set up your routes correctly however.

src/routes/abc
  route.tsx <- <Outlet />
  index.tsx
  $abcId.tsx
  $abcId.foo.tsx
  ...

src/routes/abc
  route.tsx <- <Outlet />
  index.tsx
  $abcId.tsx
  $abcId.foo.tsx
  ...

All of these would match.