React Get Current URL: How to Access and Use in Your Projects

React has revolutionized web development, becoming the go-to library for building dynamic, modern applications with interactive UIs. One essential aspect of React development is effectively managing URLs to create seamless user experiences. Enter React Router—the ultimate tool for handling routing, navigating between views, and accessing crucial URL data.

In this blog, we’ll dive deep into how React Router empowers developers to access and manipulate the current URL effortlessly. From mastering hooks like useLocation to utilizing dynamic routes, we’ll cover everything you need to know to enhance your app’s navigation and performance.

What is a React Router?

React Router is a standard library for routing in React applications. It enables you to implement dynamic routing in a web app, a system where the route changes based on user interactions or other conditions without a full page refresh. This library is essential for creating single-page applications (SPAs) where you need to manage navigation between different views.

Accessing the Current URL

To access the current URL in a React application, React Router provides several hooks and components. One of the most commonly used hooks is useLocation. This hook returns a location object that contains information about the current URL.

1import { useLocation } from 'react-router-dom';
2
3function App() {
4  let location = useLocation();
5  console.log(location);
6  return <div>Current URL is {location.pathname}</div>;
7}
8
9export default App;
10

In the above example, useLocation is imported from react-router-dom and used within a functional component to get the current location object. The location.pathname gives us the path of the current URL.

The Location Object

The location object is a key concept when working with URLs in React Router. It contains several properties that provide information about the current URL:

• pathname: A string representing the path of the current URL.
• search: A string representing the query string of the current URL.
• hash: A string representing the hash fragment of the current URL.
• state: An object representing the state of the current URL, which can be used to pass data between routes.

Working with Route Paths

In React Router, a route path defines the URL pattern that should match for a particular component to render. Route paths are used with the Route component to specify what should be displayed when a particular path is accessed.

1import { Route, Routes } from 'react-router-dom';
2import Home from './Home';
3import About from './About';
4
5function App() {
6  return (
7    <Routes>
8      <Route path="/" element={<Home />} />
9      <Route path="/about" element={<About />} />
10    </Routes>
11  );
12}
13
14export default App;
15

This snippet defines two routes: the root route (/) and the /about route. Each route is associated with a component that will render when the current route name is matched.

Dynamic Routes and URL Parameters

Dynamic routes allow you to create paths that can match a variety of URLs. URL parameters are tokens in the dynamic route path that start with a colon (:) and match a URL segment.

1import { Route, Routes } from 'react-router-dom';
2import UserProfile from './UserProfile';
3
4function App() {
5  return (
6    <Routes>
7      <Route path="/users/:userId" element={<UserProfile />} />
8    </Routes>
9  );
10}
11
12export default App;
13

In the example above, :userId is a URL parameter that will match any value in its place, allowing the UserProfile component to render with the corresponding user ID.

Query Parameters and the Search Property

Query parameters are used to pass additional information to a route. They are included in the URL after the ? symbol and are accessible via the search property of the location object.

1import { useLocation } from 'react-router-dom';
2
3function SearchResults() {
4  let location = useLocation();
5  console.log(location.search);
6  // Use a library like query-string to parse the search property
7  return <div>Search query is {new URLSearchParams(location.search).get('query')}</div>;
8}
9
10export default SearchResults;
11

In this component, location.search contains the query string, which can be parsed to get individual query parameters.

React Router Dom and Its Capabilities

The react-router-dom package is specifically designed for web applications and includes additional components and hooks not part of the core React Router package. This includes components like BrowserRouter and Link, and hooks like useParams and useNavigate.

Custom Hooks for URL Management

Sometimes, you might want to create a custom hook to encapsulate the logic for accessing and manipulating the URL. This can make your components cleaner and more reusable.

1import { useLocation, useParams } from 'react-router-dom';
2
3function useCurrentURL() {
4  const location = useLocation();
5  const params = useParams();
6
7  return {
8    pathname: location.pathname,
9    search: location.search,
10    params,
11  };
12}
13
14function App() {
15  const { pathname, search, params } = useCurrentURL();
16  console.log(`Current path is ${pathname} with search ${search} and params`, params);
17
18  return (
19    <div>
20      <p>Current path: {pathname}</p>
21      <p>Search query: {search}</p>
22      <p>Params: {JSON.stringify(params)}</p>
23    </div>
24  );
25}
26
27export default App;

In the custom hook useCurrentURL, we combine useLocation and useParams to create an object containing all the necessary information about the current URL. This object can then be used in any component requiring URL access.

Handling Full URLs and the Window Interface

Sometimes you may need to access the full URL, including the domain and protocol. While React Router focuses on the path, search, and hash, you can use the window interface to get the full URL.

1function FullURLDisplay() {
2  const fullURL = window.location.href;
3  console.log(`The full URL is: ${fullURL}`);
4  return <div>Full URL: {fullURL}</div>;
5}
6
7export default FullURLDisplay;
8

The window.location.href property provides the entire URL as a string. This can be particularly useful when you need to work with the domain or protocol of the current page.

React Router's Match Object and Dynamic Routes

Dynamic routes in React Router are robust, allowing you to create routes that can adapt based on the URL parameters. The match object, part of the props passed to a component rendered by Route, contains information about how a route matched the URL, including the URL parameters.

1import { useParams } from 'react-router-dom';
2
3function UserProfile() {
4  let { userId } = useParams();
5  return <div>User ID: {userId}</div>;
6}
7
8export default UserProfile;
9

In the UserProfile component, useParams extracts the userId parameter from the URL. This allows the component to display information specific to the user ID present in the current URL.

Effectively Manage React URL for Seamless Navigation

Effectively managing the current URL in a React app is crucial for creating dynamic, responsive, and user-friendly experiences. With React Router, you have a powerful set of tools at your disposal to handle everything from routing and URL parameters to query strings. By leveraging hooks like useLocation and useParams, and understanding the flexibility of route paths, you can easily control the flow of data and user navigation.

The key to mastering React Router lies in consistent practice and exploring its rich capabilities. Whether you’re building a simple SPA or a complex app, experimenting with the various tools React Router offers will help you craft smooth, intuitive navigation that keeps users engaged. So dive in, play with the examples, and unlock the full potential of seamless routing in your React projects!

Short on time? Speed things up with DhiWise!

Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!

You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.