React Router v6的matchPath如何使用？v5写法报错怎么解决？

报错根因 #

React Router v6 对 matchPath API 做了不兼容调整，导致原有v5写法报错：

• 入参顺序反转：v5版本调用方式为matchPath(待匹配路径, 匹配规则配置)，v6版本改为matchPath(匹配规则配置, 待匹配路径)。原有写法会把规则配置对象当成路径字符串处理，对象不存在字符串的match方法，因此抛出pathname.match is not a function错误。
• 配置字段替换：原有exact配置项已更名为end，语义不变，代表是否完全匹配路径。

正确写法示例 #

标准配置写法：

import { matchPath } from "react-router";

const match = matchPath(
  {
    path: "/users/:id",
    end: true, // 对应v5的 exact: true
    strict: false
  },
  "/users/123" // 待匹配路径放在第二个参数位
);

无特殊配置时可简化写法，直接将匹配路径作为第一个参数传入：

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

内容的提问来源于stack exchange，提问作者Vadim P.