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

React has become the go-to library for building modern web applications, offering a robust set of features that make it simple to create interactive UIs. Understanding and manipulating the current URL is often necessary when developing a React application. This is where React Router comes into play.

In this blog, we will dive deep into the intricacies of managing URLs in a React app, focusing on accessing and using the current URL in React for various purposes.

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.

Conclusion

Managing the current URL in a React application is fundamental to creating a dynamic and user-friendly web app. React Router provides a comprehensive set of tools to handle routing, URL parameters, and query strings. By understanding the location object, route paths, and the various hooks and components provided by React Router, developers can effectively control navigation and data flow within their applications.

Remember, the key to mastering React Router is practice and experimentation. Use the examples provided as a starting point and explore the different capabilities of the library. With React Router, you have the power to create seamless navigation experiences that delight your users and keep them engaged with your React application.

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.