Getting Started

Imagine you're in a vast library, with countless books and no catalogue system. It would be nearly impossible to find the book you need, right? This is something similar to what we face in web development when we want to store and retrieve something as a URL. In this blog, we will learn how to store something as a URL in ReactJS.

What is a URL?

Before we dive into the actual coding, let's understand what a URL is. URL, or Uniform Resource Locator, is just like an address of a house. It tells the browser where to find the information it needs on the internet.

Why Store Data in URL?

You might wonder why anyone would want to store data in a URL. Storing data in a URL can be beneficial, especially when you want to share a specific state of your application with others. For instance, if you want to share a specific product page from an e-commerce site, you can just copy the URL and send it to someone else.

The Basics of React Router

ReactJS does not have built-in routing like some other frameworks, but we have a pretty powerful library that we can use, called React Router. React Router is like our library's catalogue system. It helps us manage and understand our URLs and the components they point to.

import { BrowserRouter as Router, Route } from "react-router-dom";
import HomePage from "./HomePage";
import ProductPage from "./ProductPage";

function App() {
  return (
    <Router>
      <Route path="/" exact component={HomePage} />
      <Route path="/product/:id" component={ProductPage} />
    </Router>
  );
}

export default App;

In the above example, we have two routes. The first route is for our homepage, and the second one is for individual product pages. The :id in the second route is a URL parameter. It's like a placeholder for the actual product ID that will be in the URL.

Storing Data in URL With React Router

Now, let's say we have a form in our application, and we want to store the form data in the URL. We can do this by using the useHistory hook from React Router.

import { useHistory } from "react-router-dom";

function Form() {
  let history = useHistory();

  function handleSubmit(event) {
    event.preventDefault();
    let data = new FormData(event.target);
    let url = new URLSearchParams(data).toString();
    history.push("/?" + url);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input name="name" type="text" />
      <input name="email" type="email" />
      <button type="submit">Submit</button>
    </form>
  );
}

export default Form;

In the code above, we're creating a form with two input fields: name and email. When the form is submitted, we prevent the page from refreshing with event.preventDefault(). Then, we take the form data and turn it into a string with URLSearchParams. Finally, we use history.push() to navigate to a new URL that includes our form data.

Retrieving Data from URL With React Router

After storing the data in the URL, we might want to retrieve it in another component. We can do this with the useLocation hook from React Router.

import { useLocation } from "react-router-dom";

function Result() {
  let location = useLocation();
  let params = new URLSearchParams(location.search);
  let name = params.get("name");
  let email = params.get("email");

  return (
    <div>
      <p>Name: {name}</p>
      <p>Email: {email}</p>
    </div>
  );
}

export default Result;

In the code above, we retrieve the data from the URL with URLSearchParams. We then display the name and email on the page.

Conclusion

Just like how a librarian needs to sort and catalogue books in a library, as developers, we need to manage the information within our applications. By storing data in URLs, not only can we share specific states of our application, but we can also enhance the user experience by making our applications more interactive and user-friendly.

By mastering React Router, we acquire the power to control the URLs in our ReactJS applications. Like a librarian, we can now efficiently catalogue and manage the vast information within our applications. So next time when you're building a ReactJS application, remember, you're not just a developer, you're a librarian of the digital world.