React Get URL Params

In this tutorial, we will explore how to get URL params in React.

This tutorial is designed to cater to beginners who are new to React and seeking to gain proficiency in obtaining URL parameters within their applications.

If you are in the early stages of your React coding journey, this tutorial is tailored to help you with the essential knowledge and skills you need.

Let’s get started.

Introduction to React URL Params

React URL parameters, often referred to as route parameters, are values extracted from the URL. They are crucial for dynamically altering the content or behavior of a React component based on the URL.

Typically, URL parameters are used in React applications to manage routing and data filtering.

Installing react-router-dom

To simplify the process, we will use the react-router-dom library. It’s a popular library for handling routing in React applications.

You can install the library with the help of the following command.

npm i react-router-dom

Once the package is installed, we can proceed to integrate it into our React application.

Wrapping the Component Using BrowserRouter

To begin, we need to import BrowserRouter from 'react-router-dom' and wrap our top-level <App/> component with it. This step is crucial for enabling routing within our application.

You can achieve this in your index.js file as follows:

import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import reportWebVitals from "./reportWebVitals";
import App from "./App";
import "./index.css";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

reportWebVitals();

Let’s assume you want to create basic routes for an e-commerce website, specifically a route to a product page displaying its product ID and name, extracted from the URL parameter.

Note: We will display the product id and name from the URL param.

For example, if our URL is  localhost:3000/products/345&Blue t-shirt then we should display 345 and t-shirt on the product page.

Creating React Route

Let’s set up our App.js file by adding a Route.

To set up your App.js file, add a <Route> component within a <Switch> component.

This <Route> component should specify the path and the corresponding component to render when the URL matches that path:

import { Route, Switch } from "react-router-dom";
import Product from  "./components/product";
import "./App.css";

function App() {
  return (
      <main className="container">
        <Switch>
          <Route path="/products/:id?&:name?" component={Product}/>
        </Switch>
      </main>
  );
}

export default App;

In the example above, :id is a placeholder for the actual product ID and :name is a placeholder for the actual product name.

Additionally, you’ll need to create a Product component that will display the product details.

Here’s a simple Product.jsx component:

import React, { Component } from 'react';

class Product extends Component { 
    render() { 
        return (
        <div>   
        <h1>Product Details</h1>
        
        </div> 
        );
    }
}
 
export default Product;

As of now, we are just displaying h1 with Product Details as a heading.

Now we are ready to pass the params to the URL and navigate to the product page.

Passing URL params

Start the React App by npm start command in the terminal.

Once the app is running on localhost:3000 we can pass the params matching the route that we just created.

Test URL-  https://localhost:3000/products/345&blue%20t-shirt

Refer to the below snapshot we have rendered the Product component successfully when we hit our test URL.

Also, now we can see the prop object value for the Product component by going to the Chrome developer tool, Make sure you have installed the React Developer tools extension.

In our components tab, we can see the match object.

If you expand the match we have params, path, and url objects. You can clearly see that we have the params values from the URL stored in the params object.

We can get these params values simply by using dot notation like-

1. this.props.match.params.id
2. this.props.match.params.name

Here, the Product component is class-based which is why we are using this.prop to access the properties.

However, if you like working with functional components then you can directly do this.match.params.id and this.match.params.name

Tips: You can use object destructuring to get the id and name from this.props.match.params

Get and Display URL Params in React

Finally, we can update our Product component to display value from URL params in React –

import React, { Component } from 'react';

class Product extends Component { 
    render() { 
        return (
        <div>   
        <h1>Product Details</h1>
        <p>ID: {this.props.match.params.id}</p>
        <p>Name: {this.props.match.params.name}</p>
        </div> 
        );
    }
}
 
export default Product;

Here is the final view of the component that displays the params from the URL in the Product component.

Extract the URL params in React App and display it.

Conclusion

In this tutorial, you’ve learned how to work with URL params in React using the react-router-dom library.

You now have the knowledge and skills to dynamically modify your React components based on URL parameters, making your applications more flexible and user-friendly

If you require expert assistance with React app development, feel free to contact us.

We hope this guide has helped you understand how to handle URL parameters in React effectively.