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

Question

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

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

所以，localhost/admin/users 会 return admin/users

显然，我可以通过解析位置得到相同的结果，但我想知道 React 路由器是否提供了一种简单的机制来执行此操作，就像它提供 params 道具一样？

Answer 1

如果您使用的是 1.0 或更新版本，则您的 React 组件中有 location 作为与路由匹配的道具。所以你只要输入

this.props.location.pathname

得到你想要的。

Answer 2

你也可以试试

location.pathname

它可能有效，而其他方法对我无效

Answer 3

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

window.location.href 为您提供完整的 URL，如此处所建议

Answer 4

window.location 将给出完整路径。

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

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

Answer 5

对于 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

Answer 6

对于 non-react，使用浏览器 window 对象的纯 javascript 解决方案。假设当前页面 URL 是这样的 https://hostname:port/path?query.

window.location.href // returns the full URL 'https://hostname:port/path?query'

window.location.pathname // returns just the 'path' part of the full URL.

window.location.search // returns just the '?query' part of the full URL.

window.location.port // returns the 'port'.

window.location.hostname // returns just the 'hostname' part of the URL.

window.location.host // returns the hostname and port (hostname:port) part of the URL.

window.location.protocol // returns the protocol (https)

window.location.origin // returns the base URL (https://hostname:port)

有关详细信息，请参阅 https://developer.mozilla.org/en-US/docs/Web/API/Location。

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

react router get full current path name

reactjs

react-router