检查反应路由器路径是否处于活动状态

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

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

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

根据带有两个参数的 docs, you could use matchPath 函数：

你要匹配的路径名 (String)。
要匹配的选项 (Object) 或路径 (String)。

如果匹配它将return这个形状的对象：

{
  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 4

使用这个

import { matchPath } from "react-router";

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

检查反应路由器路径是否处于活动状态

Check if react-router path is active

reactjs

react-router

截至 React Router v4（2017 年 3 月）：