React中动态URL下如何正确使用this.props.location.pathname？

这个问题我之前也碰到过，核心原因是你拿实际路径和路由的模板字符串直接比较了——实际路径是带具体ID的（比如/profile/1），而'profile/:id/'只是路由规则里的占位符写法，两者肯定不相等呀！而且你的判断字符串还少了开头的/，这也会导致匹配失败。

下面给你两种靠谱的解决办法，优先推荐第二种，更符合React Router的使用逻辑：

方法一：用正则表达式匹配路径 #

如果不想依赖路由的match对象，可以用正则来匹配符合/profile/xxx格式的路径：

componentDidMount () {
  // 正则匹配以/profile/开头，后面跟着非/字符的路径，结尾的/可选
  const profilePathRegex = /^\/profile\/[^/]+\/?$/;
  if (profilePathRegex.test(this.props.location.pathname)) {
    console.log('is profile');
  } else {
    console.log('is not profile');
  }
}

这个正则能兼容/profile/1和/profile/1/两种路径格式，避免因为结尾斜杠导致的匹配失败。

方法二：利用React Router的match对象（推荐） #

既然你的项目是基于react-redux-starter-kit搭建的，肯定用到了React Router，路由组件会自动接收match属性，里面包含了路由匹配的参数和规则。

如果你的路由配置是类似这样的：

<Route path="/profile/:id" component={Profile} />

那直接通过match.params.id就能判断是否是个人页面，还能直接拿到ID值：

componentDidMount () {
  // 检查是否存在id参数，存在则说明是个人页面
  if (this.props.match.params.id) {
    console.log('is profile');
    // 顺便可以拿到用户ID：const userId = this.props.match.params.id;
  } else {
    console.log('is not profile');
  }
}

如果你的Profile组件不是直接通过<Route>渲染的（比如是嵌套在其他组件里），可能拿不到match属性，这时候需要用withRouter高阶组件包裹你的组件：

import { withRouter } from 'react-router-dom';

class Profile extends React.Component {
  // 你的组件逻辑
}

// 用withRouter包裹后，组件就能拿到location、match等路由相关props了
export default withRouter(Profile);

这种方法比正则更可靠，因为直接利用路由系统传递的信息，不需要自己维护匹配规则，也不容易出错。

内容的提问来源于stack exchange，提问作者a7dc