反应路由器 v6。matchPath 现在应该如何工作

Question

在版本 5 中，我可以通过这种方式执行检查https://v5.reactrouter.com/web/api/matchPath

import { matchPath } from "react-router";

const match = matchPath("/users/123", {
  path: "/users/:id",
  exact: true,
  strict: false
});

在版本 6 中，我在屏幕上看到错误。现在应该如何运作？ 错误：pathname.match 不是函数

Answer 1

看起来react-router-dom@6传递的参数的顺序是颠倒的。

匹配路径

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是第一个参数，pathname是第二个参数。

pathname那么你已经通过了pattern：

const match = matchPath("/users/123", {
  path: "/users/:id",
  exact: true,
  strict: false
});

要解决交换传递给的参数顺序的问题matchPath：

const match = matchPath(
  { path: "/users/:id" },
  "/users/123",
);