如果你使用的是1.0或更高版本，你会在你的React组件中使用location作为一个prop，它会与一个路由匹配。

this.props.location.pathname

字符串
得到你想要的

this.props.location.pathname仅给出路由路径。
window.location.href为您提供完整的URL，如下所示https://stackoverflow.com/a/39823749/7560899

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

你也可以尝试

location.pathname

字符串
它可能会工作，而其他方法不像它对我做的那样

对于使用浏览器窗口对象的非React，纯基于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-dom v6

const { pathname } = useLocation();

字符串
如果有人需要，请导入

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

型

window.location将给予完整路径。
this.props.location.pathname-它可能不会给予完整的路径。如果你只想要没有域名前缀的URL路径，使用这个。（另外，我可能建议使用上下文API在任何子组件中获取这个，而不是将其作为props传递）
再举一个例子，要实现具有社交共享功能的新组件，您可能需要使用window.location而不是location.pathname。

如果你想要不带/的路径名，那么使用它

window.location.pathname.split('/')[1]