useLocation
useLocation retrieves the current URL information as an object, this object changes whenever the user navigates to a new URL. Object provides properties like pathname, search string and a hash fragment. useLocation hook can also be used in cases like triggering events by a change in URL.
useLocation only reflects the current URL and doesn’t triggger re-renders when the URL changes on its own. If you need to respond to your URL changes , consider using the “useEffect” hook along with the “useLocation” hook.
Example: Below is an example of useLocation. In the below code the “location.search() ” returns the entire string after ” ? ” from the URL.
import {
BrowserRouter,
Routes,
Route
} from 'react-router-dom';
import MyComponent from './MyComponent';
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<MyComponent />} />
<Route path="/products/:productId"
element={<MyComponent />} />
</Routes>
</BrowserRouter>
);
}
function MyComponent() {
const location = useLocation();
return (
<div>
<p>Current Path: {location.pathname}</p>
<p>Search String: {location.search}</p>
</div>
);
}
export default App;
Output:
What are the React Router hooks in React v5?
React Router hooks perform client-side single-page routing that provides a functional and streamlined approach to managing navigation in React applications. It provides a way to directly access the state of the router from functional components, this simplifies tasks like retrieving information about the desired URL and navigating through web pages.
We will discuss the different React Router hooks in React v5:
Table of Content
- useParams
- useLocation
- useHistory
- useRouteMatch