检查react-router路径是否处于活动状态

Question

如何检查通用react-router路径是否与当前位置路径名匹配？

react-router path: /Movies/:id
location.pathname: /Movies/56fa7446bae6eb301e5937f3

我想使用带有菜单按钮的路径路径来设置class ="active".

编辑:

为了澄清,我的应用程序中的路径如下所示:

/Movies/56fa7/watch

而不是像:

/Movies/watch/56fa7

如何检查以前的路线是否有效？

没有<Link>组件可行吗？

/Movies/56fa7/watch是任意的/Movies,<Link>显然不能指向任意位置.所以我们<Link>暂时忽略一下:

在react-router中是否有一个独立的函数或属性来检查是否/Movies/:id/watch有效？

Answer 1

根据文档,您可以使用matchPath带有两个参数的函数:

1. 要匹配的路径名(String).
2. 要匹配的options(Object)或path(String).

如果匹配,它将返回此形状的对象:

{
  path, // the path used to match
  url, // the matched portion of the URL
  isExact, // whether or not we matched exactly
  params
}

否则你会得到null.

要在组件中使用它,您可以简单地执行以下操作:

import { matchPath } from 'react-router';

// ...

render () {
  const isMovieWatchPathActive = !!matchPath(
    this.props.location.pathname, 
    '/Movies/:id/watch'
  ); 

  // ...
}

希望它能帮助别人.

Answer 2

从React Router v4开始（2017年3月）：

我参加聚会有点晚了，但希望对任何有相同问题的人都能有所帮助。通过渲染组件时Route，某些道具会传递给它。这些道具可用于确定哪个路线处于活动状态。

在由呈现的组件中Route，您可以this.props.match.url用来获取浏览器请求的实际URL，也可以this.props.match.path用来获取当前路线的路径模式。

在此处检查工作示例：https : //codesandbox.io/s/20o7q0483j

与此相关的文档可在此处获取：https： //reacttraining.com/react-router/web/api/Route/Route-props

Answer 3

用这个

import { matchPath } from "react-router";

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