How to use useLocation hook In ReactJS
The useLocation hook is provided by the react-router-dom library and is specifically designed for React applications. It provides a reactive way to access the current location, making it more suitable for applications with complex routing needs.
Example: The below example uses useLocation hook to Get The Current full URL.
// App.js
import React from 'react';
import { Route, Routes } from 'react-router-dom';
import { BrowserRouter } from 'react-router-dom'
import MyComponent from './components/MyComponent';
import About from './components/About';
const App = () => {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<MyComponent />} />
<Route path="/about" element={<About />} />
</Routes>
</BrowserRouter>
);
};
export default App;
// components/MyComponent.js
import React from 'react';
import { Link } from 'react-router-dom';
const Home = () => {
const currentURL = window.location.href;
return (
<div>
<h1>Home page</h1>
<Link to="/about">
Go to About
</Link>
</div>
);
};
export default Home;
import React, { useState } from 'react';
import { useLocation } from 'react-router-dom';
const About = () => {
const [showURL, setShowURL] = useState(false);
const location = useLocation();
const currentURL =
`${window.location.protocol}//${window.location.host}${location.pathname}${location.search}${location.hash}`;
const handleButtonClick = () => {
setShowURL(true);
};
return (
<div>
<h2>
Get current URL
using useLocation hook
</h2>
<button onClick={handleButtonClick}>
Show Current URL
</button>
{showURL && (
<h3>
<p>Current URL: {currentURL}</p>
</h3>
)}
</div>
);
};
export default About;
Output: run the application using the below command
npm start
How to Read the Current full URL with React?
In React applications, it is often necessary to read the current full URL for various purposes, such as routing, conditional rendering, or logging. There are two common approaches to achieve this: using the window.location object and using the useLocation hook from react-router-dom.