Read the current full URL with React

Question

How do I get the full URL from within a ReactJS component   I m thinking it should be something like this props location but it is undefined

User · Answer

You can access the full uri url with  document referrer   Check https   developer mozilla org en-US docs Web API Document referrer

User · Answer

window location href is what you re looking for

User · Answer

To get the current router instance or current location you have to create a Higher order component with withRouter  from react-router-dom  otherwise  when you are trying to access this props location it will return  undefined  Example  import React    Component   from  react   import   withRouter   from  react-router-dom    class className extends Component          render               return                                                              export default withRouter className

User · Answer

If you need the full path of your URL  you can use vanilla Javascript   window location href  To get just the path  minus domain name   you can use   window location pathname   x000D   x000D  console log window location pathname     yields    js   where snippets run  x000D  console log window location href         yields   https   stacksnippets net js  x000D   x000D   x000D    Source  Location pathname Property - W3Schools  If you are not already using  react-router  you can install it using   yarn add react-router  then in a React Component within a  Route   you can call   this props location pathname  This returns the path  not including the domain name   Thanks  abdulla-zulqarnain

User · Answer

window location href is what you need  But also if you are using react router you might find useful checking out useLocation and useHistory hooks  Both create an object with a pathname attribute you can read and are useful for a bunch of other stuff  Here s a youtube video explaining react router hooks Both will give you what you need  without the domain name   import   useHistory  useLocation   from  react-router-dom   const location   useLocation   location pathname  const history   useHistory   history location pathname

User · Answer

Just to add a little further documentation to this page - I have been struggling with this problem for a while  As said above  the easiest way to get the URL is via window location href  we can then extract parts of the URL through vanilla Javascript by using let urlElements   window location href split      We would then console log urlElements  to see the Array of elements produced by calling  split   on the URL  Once you have found which index in the array you want to access  you can then assigned this to a variable let urlElelement    urlElements 0    And now you can use the value of urlElement  which will be the specific part of your URL  wherever you want

User · Answer

You are getting undefined because you probably have the components outside React Router   Remember that you need to make sure that the component from which you are calling this props location is inside a  lt Route   gt  component such as this    lt Route path   dashboard  component  Dashboard    gt   Then inside the Dashboard component  you have access to this props location

User · Answer

this props location is a react-router feature  you ll have to install if you want to use it   Note  doesn t return the full url

User · Answer

As somebody else mentioned  first you need react-router package  But location object that it provides you with contains parsed url   But if you want full url badly without accessing global variables  I believe the fastest way to do that would be       const getA   memoize      gt  document createElement  a     const getCleanA        gt  Object assign getA      href          const MyComponent      location      gt      const   href     Object assign getCleanA    location            href is the one containing a full url   For memoize I usually use lodash  it s implemented that way mostly to avoid creating new element without necessity   P S   Of course is you re not restricted by ancient browsers you might want to try new URL   thing  but basically entire situation is more or less pointless  because you access global variable in one or another way  So why not to use window location href instead

[reactjs] Read the current full URL with React?

Examples related to reactjs