Accepted answer

If you're using 1.0 or newer, you have the location as a prop in your React components that are matched against a route. So you just type


to get what you wanted.


For a non-react, pure javascript based solution using the browser window object. Let's say the current page URL is something like this 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. // 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. // 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)

See for more details.


window.location will give the full path.

this.props.location.pathname - it may not give the full path. use this, if you want just the URL path without the domain prefix. (also, I may suggest using context API to get this in any child components instead of passing this as props)

one more example, to implement the new component with social share feature, you may need to use the window.location and not the location.pathname.


You can also try


It may work while other methods don't as it did to me


For React Functional Component

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

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

    useEffect(() => {
  }, []);

  return ();


  export default MyComponent;

There are many other options:


this.props.location.pathname gives only the routing path.

window.location.href gives you the full URL, as suggested here

Related Query

More Query from same tag