Question 173876 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – useMatch for multilpe patterns to test on in react-router-dom

I have the following array:

const tabsList = [
  { 
    pathPattern: 'users/'
    label: 'Manage users'
  },
  {
    pathPattern: 'users/:id',
    label: 'Edit user profile'
  }
]

I need a method from react-router-dom to tell me which of the above array entries matches the current pathname.

Based on that, I will be able to color the active list item in my component styles.

I found the method useMatch() which looks like does almost what I want, however, it does not accept an array, it only accepts one string pattern to use for comparison.

// example: current path is /users/82374023854321
const isAllUsersMatch = useMatch('/users') // null
const isUserIdMatch = useMatch('/users/:id') // { ...PathMatch<string> }

it works, but it’s not good, I have to create a separate variable like that for every item in the array.

Is there something like the following in react-router-dom?

const tabsList = [
  { 
    pathPattern: 'users/'
    label: 'Manage users'
  },
  {
    pathPattern: 'users/:id',
    label: 'Edit user profile'
  }
] 
const activeListItem = tabsList.some((listItem)=> doesItMatch(listItem.pathPattern))

I would have done this with the hook, but in react you can’t use a hook inside a callback, so the following would not work:

// const activeListItem = tabsList.some((listItem)=> doesItMatch(listItem.pathPattern))
const activeListItem = tabsList.some((listItem)=> useMatch(listItem.pathPattern)) // ERROR
Tags:

2

Answers


  1. 0

    You can probably use react-router‘s matchRoutes() if you change the shape of your object:

    const location = useLocation()

const matches = matchRoutes([{ 
  path: 'users/',
  label: 'Manage users',
}, {
  path: 'users/:id',
  label: 'Edit user profile',
}], location)
    Login or Signup to reply.
  2. 0

    You are on the right track iterating over the tabsList array. If all you need is to match the current path to one in a configuration object/array, then instead of using the useMatch hook, which doesn’t work in a nested callback function, you can use the matchPath utility function that the useMatch hook uses directly.

    import { matchPath, useLocation } from "react-router-dom";

const tabsList = [
  {
    pathPattern: "users/",
    label: "Manage users"
  },
  {
    pathPattern: "users/:id",
    label: "Edit user profile"
  }
];

...

const { pathname } = useLocation();
const activeListItem = tabsList.find(({ pathPattern }) =>
  matchPath(pathPattern, pathname)
);

    And the above abstracted into a custom hook:

    const useTabsListMatches = (tabsList = []) => {
  const { pathname } = useLocation();
  return tabsList.find(({ pathPattern }) =>
    matchPath(pathPattern, pathname)
  );
}

    const activeListItem = useTabsListMatches(tabsList);

    Edit usematch-for-multilpe-patterns-to-test-on-in-react-router-dom

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search