How to Get the Current URL in React: A Complete Guide for Developers

Learn how to access the current URL in a React application using React Router, the location object, query parameters, and the window interface. See practical examples for handling paths, routes, and debugging with console log in modern React projects.

When building a React application, one common question is: “How do I get the current URL?”

Whether it’s showing route-based content, handling query parameters, or working with dynamic routes, accessing the current URL is key. With tools like react router dom and the useLocation hook, you can easily read the location object and make your application more responsive to user navigation.

Why Accessing the Current URL Matters

Before writing code, it helps to understand why developers often need the current URL in React applications. The current URL can be used for:

• Reading query parameters for filtering or searching.
• Redirecting users based on route paths.
• Displaying dynamic content depending on the current route.
• Debugging navigation using console log.

React applications that depend on route-specific data rely on accessing the location object. With this object, you can easily read properties such as pathname, search, and hash.

Using React Router to Get the Current URL

The most reliable way to obtain the current URL in React is to use the React Router library. The React Router package provides a set of hooks that allow direct access to route and location information. Among them, the useLocation hook is the most popular choice.

React Router DOM exposes this hook and returns a location object that represents the current URL. This object contains key properties such as pathname, search, and hash.

Example: Accessing the Current URL with useLocation

Copy
1import React from "react";
2import { BrowserRouter as Router, Route, Routes, useLocation } from "react-router-dom";
3
4function Home() {
5  const location = useLocation();
6  console.log("Current URL:", location.pathname + location.search);
7
8  return <h2>Home Page - Current Path: {location.pathname}</h2>;
9}
10
11export default function App() {
12  return (
13    <Router>
14      <Routes>
15        <Route path="/" element={<Home />} />
16      </Routes>
17    </Router>
18  );
19}
20

In this example, the function Home component uses the useLocation hook to read the current pathname and query parameters. The console log outputs the current route every time the user navigates.

This chart shows how the flow starts from React Router DOM, goes through the useLocation hook, and gives you the location object with its properties, which can then be logged or used in your component.

Understanding the Location Object

The location object plays a key role when working with routes. It contains properties that represent different parts of the current URL:

• pathname: The current pathname of the route.
• search: The query string, often used to access query parameters.
• hash: The fragment identifier in the URL.
• state and key: other properties managed by React Router.

This current location object gives you everything you need to manage routing and navigation effectively.

Example: Displaying Location Properties

Copy
1function Home() {
2  const location = useLocation();
3  console.log(location);
4
5  return (
6    <div>
7      <p>Pathname: {location.pathname}</p>
8      <p>Search: {location.search}</p>
9      <p>Hash: {location.hash}</p>
10    </div>
11  );
12}
13

Every time you navigate, the useLocation hook returns an updated location object.

Working with URL Parameters in React

A common requirement is to read URL parameters from the route path. In React Router, you can define a dynamic route and then access its parameters using the useParams hook.

Example: Handling Dynamic Routes

Copy
1import { useParams } from "react-router-dom";
2
3function UserProfile() {
4  const { id } = useParams();
5  console.log("User ID:", id);
6
7  return <h2>User Profile - ID: {id}</h2>;
8}
9
10export default function App() {
11  return (
12    <Router>
13      <Routes>
14        <Route path="/user/:id" element={<UserProfile />} />
15      </Routes>
16    </Router>
17  );
18}
19

Here, the route path element home could be /user/:id, which allows you to access dynamic routes. The query parameters can be combined with this to add more filters.

Routing in React enables seamless navigation between different views in single-page applications without full page refreshes. It's the mechanism that maps URLs to specific components. — Check out the full post here

Accessing Query Parameters in the Current URL

To work with query parameters, you can use the URLSearchParams API along with the location.search property. This is particularly useful for filtering data in a React app.

Example: Reading Query String

Copy
1function SearchPage() {
2  const location = useLocation();
3  const query = new URLSearchParams(location.search);
4
5  const keyword = query.get("q");
6  console.log("Search keyword:", keyword);
7
8  return <p>Search keyword: {keyword}</p>;
9}
10

The query string is extracted from the location.search property. This is how you can filter content based on the current page state.

Accessing the Full URL with the Window Interface

Sometimes, you may need the full URL, including the protocol, domain, and relative path. The window interface provides direct access through the window.location object.

Example: Using the Window Object

Copy
1function Home() {
2  console.log("Full URL:", window.location.href);
3  console.log("Protocol:", window.location.protocol);
4  console.log("Domain:", window.location.hostname);
5
6  return <h2>Check Console for Full URL Details</h2>;
7}
8

Here, the href property returns the full URL, while other attributes of the window object help you get the protocol and domain separately.

Looking to build React projects faster with production-ready code? Try Rocket.new and simplify your workflow today.

Start Building with Rocket.new

Creating a Custom Hook to Access the Current URL

If you need to reuse the logic across multiple components, you can create a custom hook. This hook can wrap around useLocation and simplify URL handling.

Example: Custom Hook for URL Access

Copy
1import { useLocation } from "react-router-dom";
2
3function useCurrentUrl() {
4  const location = useLocation();
5  return location.pathname + location.search;
6}
7
8function Home() {
9  const url = useCurrentUrl();
10  console.log("Custom Hook Current URL:", url);
11
12  return <p>URL: {url}</p>;
13}
14

This custom hook makes it easy to get the current route in different components without repeating code.

Using Console Log for Debugging

Throughout development, console log remains one of the simplest yet most effective tools for debugging routes in a React project. By logging the location object or the current route, you can quickly confirm whether navigation updates are happening as expected. This is especially useful when dealing with query parameters or testing how your dynamic route is being resolved.

For example, you might log location.pathname to check the current path, or output location.search to confirm if the query string is being captured correctly. Regular use of console log During development, it helps you validate routing logic before moving on to more advanced debugging methods.

Next Steps: Applying URL Access in Your Projects

Now that you know how to get the current URL in React, start applying these methods in your own projects. Whether you are building navigation flows, filtering content using query parameters, or debugging routes with console log, these techniques will help you manage your application routes effectively.

Final Thoughts on React Get Current URL

Working with the current URL in a React application is straightforward once you understand how the location object works. Whether you use the uselocation hook, the window interface, or a custom hook, you can always access and control routing effectively. With React Router, handling dynamic routes, query parameters, and full URL details becomes simple.