React Router 4中如何获取匹配组件的完整当前路径

你提到的两种方法（props.history.createHref(props.location)和手动拼接）确实能拿到完整路径，但React Router 4其实提供了更直接、简洁的方式，不用额外拼接或调用方法。

1. 直接使用location.href属性 #

React Router注入到组件props中的location对象本身就包含一个href属性，它会直接返回完整的当前路径（包含pathname、search和hash），这是最省心的方案：

类组件示例： #

class MyComponent extends React.Component {
  render() {
    const fullPath = this.props.location.href;
    return <div>当前完整路径：{fullPath}</div>;
  }
}

函数组件（无Hook）示例： #

function MyComponent(props) {
  const fullPath = props.location.href;
  return <div>当前完整路径：{fullPath}</div>;
}

2. 使用Hook（React Router 4.3+） #

如果你用的是React Router 4.3及以上版本，还可以借助useLocation钩子快速获取location对象，同样直接取href属性即可：

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

function MyComponent() {
  const location = useLocation();
  const fullPath = location.href;
  return <div>当前完整路径：{fullPath}</div>;
}

为什么这是更优方案？ #

• 无需手动拼接多个属性，避免出现遗漏search/hash、格式错误等问题
• location.href是React Router内部维护的属性，和路由状态完全同步，比手动拼接更可靠
• 代码更简洁易读，减少冗余逻辑

另外补充一点：你之前用的props.history.createHref(props.location)其实和location.href效果类似，但location.href直接从注入的对象获取，少了一次函数调用，效率上略胜一筹。

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