React-Router V6 检查路径是否与模式匹配

Question

我正在尝试在react-router v6中检查“/admin/posts/new”到“/admin/*”。我发现有一个matchRoutes函数

import { useLocation } from "react-router";
const { pathname } = useLocation();
const isAdminPath = someMatchFunc(pathname,"/admin/*") <<<< something goes here returns true or null

Answer 1

您应该能够使用 matchPath 函数。在 v6 中它看起来像这样：

import { useLocation, matchPath } from "react-router";
const { pathname } = useLocation();
const isAdminPath = matchPath("/admin/*", pathname);

值得注意的是，他们更改了 v6 中的参数。在 v5 中，您可能会这样做。

import { useLocation, matchPath } from "react-router";
const { pathname } = useLocation();
const isAdminPath = matchPath(pathname, { path: "/admin", exact: false });

Answer 2

改用useRouteMatch​matchPath

import { useRouteMatch } from "react-router-dom";

function BlogPost() {
  let match = useRouteMatch("/blog/:slug");

  // Do whatever you want with the match...
  return <div />;
}