How to fetch current url in react js
React How To Get Current URL Value (Browser's Address Bar)
Timecodes:
hey guys in this tutorial I'm going to
show you how to get the current URL from
your browser's address bar in react
so here I have my basic react app
running in the browser
I have use statehook imported and I also
created this variable called URL which
by default will store the value of none
and that's what we're displaying in the
browser right now now this is because in
the react we have to use everything
through State and so that's why I
created that URL using the user
statehook now to track changes in this
variable we need to import use effect
hook and here I'm going to use the use
effect hook with an arrow function and
for the dependencies array of this use
effect we're going to use an empty array
so this use effect runs only once so now
let's get the current URL from address
bar so I'm going to define a new
variable const and I'm going to call it
CU for current URL
I'm going to make it equals
window.location.href
because that's where JavaScript stores
the current URL that you see in the
browser
now to set this to our URL variable in
the state we need to use the set URL
function so and that's what I'm going to
do so type set URL and pass the CU
variable into the function so now if I
press Ctrl s to save this react app it's
going to refresh in the browser
and that will display our current URL
here so my app is running on HTTP
localhost 8080 and that's the URL that
we have just received from window
location href now you don't really have
to store this in a separate variable you
can pass it directly to the set URL
function and so guys basically this is
when it comes to react how to get
current URL basically that's the proper
way of getting current URL from the
address bar in react
Related queries:
how to get current url in node js
how to get current page in react native
react fetch url example
current url react router
reactjs fetch example
current url in react js
fetch url javascript example
![[32] React JS | React Router V6 | Send data from one route to another useNavigate state, useLocation](https://img.youtube.com/vi/kibtFP9wfLM/mqdefault.jpg)
