Setting defaultValue of <select> tag based on route match

[akshay-nm]

I have the tabs working perfectly fine with the tanstack location package.
Since my dashboard has a lot of tabs, I am using a select tag for small screens.
I am trying to make sure the select tag always shows the current page.

In react router I did:

const tabs = [
  {
    name: "Something",
    href: "something",
    path: ":someId/some-path",
    end: true,
    exact: true,
  },
  { name: "Some Other Thing", href: "some-other-thing", path: ":someOtherId/some-path" },
];

Then in the react component:

  const location = useLocation();
  const matchData = matchRoutes(tabs, location);
  return (
    <select
      defaultValue={
        tabs.find(
          (tab) => matchData && tab.path === matchData[0].route.path
        )?.name ?? tabs[0].name
      }
    >
      {tabs.map((tab) => (
        <option key={tab.name} value={tab.href}>
          {tab.name}
        </option>
      ))}
    </select>
  )

Is there a function similar to matchRoutes in the react-router-dom package? Here's a link: https://reactrouter.com/docs/en/v6/utils/match-routes

[akshay-nm]

Now that I have written this, I already know a better way would be to keep tabs as a part of search so that it can be easily accessed via useMatch hook. Then I can just create a map of all the tabs and use that map to update the select tag.
But still, I'd love to know if there is something offered in tanstack location package for my previous approach.

[jerriep]

I have a similar requirement. I was able to use useMatchRoute for this purpose, similar to the code below

const navigate = useNavigate();
const matchRoute = useMatchRoute();

return (
  <select>
    {items.map((item) => {
      const match = matchRoute({ to: item.to });

      return (
        <option
          key={item.text}
          onClick={() => navigate({ to: item.to })}
          selected={match !== undefined}
        >
          {item.text}
        </option>
      );
    })}
  </select>
);