反应路由器获取完整的当前路径名答案

【问题标题】：react router get full current path name反应路由器获取完整的当前路径名
【发布时间】：2016-06-05 15:10:11
【问题描述】：

有没有简单的方法返回当前路由器地址。

IE，如果我在页面上，我只想根据反应路由器查看我在哪个页面上。

所以，localhost/admin/users 会返回 admin/users

显然，我可以通过解析位置得到相同的结果，但我想知道 react 路由器是否提供了一个简单的机制来做到这一点，就像它提供 params 道具一样？

【问题讨论】：

Read the current full URL with React?的可能重复

标签： reactjs react-router

【解决方案1】：

如果您使用的是 1.0 或更高版本，您可以在 React 组件中将 location 作为与路由匹配的道具。所以你只需输入

this.props.location.pathname

得到你想要的。

【讨论】：

这不包括查询参数
也不包含域

【解决方案2】：

this.props.location.pathname 只给出路由路径。

window.location.href 为您提供完整的 URL，正如此处建议的 https://stackoverflow.com/a/39823749/7560899

【讨论】：

窗口未定义。

【解决方案3】：

你也可以试试

location.pathname

它可能会起作用，而其他方法对我不起作用

【讨论】：

与react-router无关。它是浏览器的窗口对象属性。
是的。但在某些情况下，它可以工作，而其他解决方案则不能。
作为一种实践，我不会将浏览器功能与 React 混合使用，因为您可能会使用相同的代码进行服务器端渲染

【解决方案4】：

对于 React 函数式组件

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

const MyComponent = () => {
  let location = useLocation();
  ...useState

    useEffect(() => {
    console.log(location.pathname);
  }, []);

  return ();

  };

  export default MyComponent;

还有很多其他选择： https://dev.to/finallynero/hooks-introduced-in-react-router-v5-1-7g8

【讨论】：

【解决方案5】：

window.location 将给出完整路径。

this.props.location.pathname - 它可能不会给出完整路径。如果您只想要没有域前缀的 URL 路径，请使用它。（另外，我可能会建议使用上下文 API 在任何子组件中获取此内容，而不是将其作为道具传递）

再举一个例子，要实现具有社交分享功能的新组件，您可能需要使用window.location 而不是location.pathname。

【讨论】：