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

Posted 2023-02-21

【中文标题】检查 react-router 路径是不是处于活动状态

【英文标题】：Check if react-router path is active检查 react-router 路径是否处于活动状态

【发布时间】：2016-07-17 07:35:24

【问题描述】：

如何检查通用 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 是否处于活动状态？

【问题讨论】：

检查：github.com/reactjs/react-router/tree/master/examples/…

不行，因为不能设置。当路径名为 /Movies/56fa7446bae6eb301e5937f3 时， 将不会被激活。

【参考方案1】：

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

路径名要匹配 (String)。 选项 (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'
  ); 

  // ...

希望它会帮助某人。

【讨论】：

成功了，谢谢。唯一的修改是您应该从 react-router 导入 matchPath

【参考方案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

【讨论】：

使用useParams Hook 时，match 对象不可用

【参考方案3】：

使用这个

import  matchPath  from "react-router";

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

【参考方案4】：

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

【讨论】：

是的，但它们只会匹配精确的路径名。我需要 组件中使用的一般路径的解决方案。

我明白了，虽然当孩子匹配时，父母也应该是活跃的。 github.com/reactjs/react-router-tutorial/tree/master/lessons/…

请参阅原始问题中的编辑。

这在 v4 中有所改变，请参阅 ***.com/a/43081982/2333665