In version 5 I could perform check this way https://v5.reactrouter.com/web/api/matchPath
import { matchPath } from "react-router";
const match = matchPath("/users/123", {
path: "/users/:id",
exact: true,
strict: false
});
In version 6 I get an error on the screen. How should this work now? error: pathname.match is not a function
It looks like in react-router-dom@6 the order of the arguments passed was inverted.
declare function matchPath< ParamKey extends string = string >( pattern: PathPattern | string, pathname: string ): PathMatch<ParamKey> | null; interface PathMatch<ParamKey extends string = string> { params: Params<ParamKey>; pathname: string; pattern: PathPattern; } interface PathPattern { path: string; caseSensitive?: boolean; end?: boolean; }
pattern is the first argument, pathname is the second.
You've passed pathname then pattern:
const match = matchPath("/users/123", {
path: "/users/:id",
exact: true,
strict: false
});
To resolve swap the order of arguments passed to matchPath:
const match = matchPath(
{ path: "/users/:id" },
"/users/123",
);