Demystifying useLocation in ReactJS: A Beginner’s Guide to Navigation

Navigation is a fundamental aspect of web development, especially in ReactJS applications. As a beginner, understanding how to manage routes and access information about the current URL is crucial. In this beginner-friendly guide, we will delve into the world of React Router DOM and demystify one of its powerful tools - the useLocation hook. We'll break down its significance, discuss its usage, and provide practical examples to help you grasp this concept effortlessly.

Understanding the Basics:

Before we dive into the code, let's grasp the basics. In ReactJS applications, navigation between different pages or components often requires understanding the current URL. React Router DOM is a popular library that simplifies this process, and the useLocation hook is a key tool it offers.

What is useLocation?

In React Router DOM, the useLocation hook provides access to the current location object. This object contains valuable information about the current URL, such as path names, query parameters, and more. Understanding and utilizing this information can significantly enhance the user experience of your web application.

How to Use useLocation:

Let's explore a simple example to illustrate the usage of the useLocation hook:

import React from "react";
import {
  BrowserRouter as Router,
  Route,
  Link,
  Switch,
  useLocation
} from "react-router-dom";


// Hoem component code 
const Home = () => {
  const location = useLocation();
  console.log(location);
  return (
    <div>
      <h3> Welcome to the Home Page!</h3>
      <h1>Home Page {location.pathname}</h1>
      <p>Current Path: {location.pathname}</p>
      <p>Search Parameters: {location.search}</p>
    </div>
  );
};

// About component code 
const About = () => {
  const location = useLocation();
  console.log(location);

  return (
    <div>
      <h3> Welcome to the About Page!</h3>
      <h1>About Page {location.pathname}</h1>
      <p>Current Path: {location.pathname}</p>
      <p>Search Parameters: {location.search}</p>
    </div>
  );
};


// Contact component code
// Practice same as above home and about component on Contact component
const Contact = () => <h1>Contact Us</h1>;




const NotFound = () => <h1>404 - Page Not Found</h1>;

const App = () => {
  return (
    <Router>
      <nav style={{ display: "flex", gap: "20px" }}>
        <Link to="/home">Home</Link>
        <Link to="/about">About</Link>
        <Link to="/contact">Contact</Link>
      </nav>

      <Switch>
        <Route exact path="/home" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
        <Route component={NotFound} />
      </Switch>
    </Router>
  );
};

export default App;

Check out and Explore Above
https://codesandbox.io/s/uselocation-reactjs-7jkgd3?file=/src/App.js

In this example, we import the useLocation hook and utilize in the About component to access the location object such as pathname and search. By accessing location.pathname and location.search, we can display the current path and search parameters, respectively.
The Route components define the paths and their corresponding components within the Switch component, which ensures that only one route is rendered at a time.

Current location object for About component :-

{pathname: "/about", search: "", hash: "", state: undefined, key: "bhlp93"}
pathname: "/about"
search: ""
hash: ""
state: undefined
key: "bhlp93"

Real-World Application:

Imagine you're building an e-commerce website. Using the useLocation hook, you can dynamically render different product details based on the route and query parameters. For instance, displaying specific product information when a user selects a particular item from the URL.
We can then utilize properties of the location object, such as pathname and search, to display information about the current route.
The Route components define the paths and their corresponding components within the Switch component, which ensures that only one route is rendered at a time.

Best Practices:

• Component Placement: Ensure that you use the useLocation hook within a component that is rendered within a <Router> component. This ensures access to the current location object.

• Avoid Overuse: While the useLocation hook is powerful, avoid excessive reliance on it for complex logic or business rules. Instead, use it to gather information and pass it to other components or functions.

• Optimize Performance: Be mindful of performance impacts, especially when using the useLocation hook in deeply nested components. Consider optimizing rerenders if necessary.

Conclusion:

Understanding the useLocation hook in React Router DOM is essential for building dynamic and responsive web applications. By harnessing its power, you can create seamless navigation experiences, whether you’re building an e-commerce platform, a blog, or any other type of web application. As you continue your ReactJS journey, remember that mastering the fundamentals of navigation is a key step toward becoming a proficient React developer.

Feel free to experiment with the useLocation hook in your projects, and don’t hesitate to explore its full potential. Happy coding!