检查 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

根据docs，您可以使用带有两个参数的matchPath 函数：

1. 路径名要匹配 (String)。
2. 选项 (Object) 或路径 (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 渲染组件时，某些道具会传递给它。这些 props 可用于确定哪条路线处于活动状态。

在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
});

Answer 4

查看链接的属性：activeStyle 或 activeClassName。他们应该在路由匹配时自动将链接设置为活动。见例子：https://github.com/reactjs/react-router-tutorial/tree/master/lessons/05-active-links