Get Parameters in URL in React js with Router

React is a popular JavaScript library used to build user interfaces for web applications. It provides a powerful set of tools for building complex UIs and managing state. One of the most important aspects of building web applications is being able to pass data between different pages or components. In React, this can be accomplished using parameters in the URL.

URL parameters are a way to pass data in the URL itself. These parameters can be used to dynamically change the content of a page or component based on user input. In this article, we will explore how to get parameters in URL in React using the React Router library.

React Router is a library that provides routing functionality for React applications. It allows developers to define routes for different components and handle navigation between them. In addition, React Router provides functionality for handling URL parameters. To get parameter in URL in react js. This tutorial will explain to you in detail how to get parameters in URL in react js app using react router.

To get parameters in URL in React with Router, you first need to define a route that will accept parameters. This can be done using the Route component from the React Router library. The Route component takes two props: path and component. The path prop defines the URL path for the route, and the component prop defines the React component that will be rendered for that route.

How to Get Parameter in URL in React js with Router

Just follow the following steps and to get parameter in URL in react js app:

• Step 1 – Create React App
• Step 2 – Install Router and Bootstrap 4 Package
• Step 3 – Create Nav Component
• Step 4 – Add Component in App.js

Step 1 – Create React App

In this step, open your terminal and execute the following command on your terminal to create a new react app:

npx create-react-app my-react-app

To run the React app, execute the following command on your terminal:

npm start

Check out your React app on this URL: localhost:3000

Step 2 – Install Router and Bootstrap 4 Package

In this step, execute the following commands to install react router and boostrap 4 library into your react app:

npm install bootstrap --save
npm install react-router-dom

Then, Add react router and bootstrap.min.css file in src/App.js file:

import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';

function App() {
  return (
    <div>
      <h2>How to Get Parameter in URL in React js with Router</h2>
    </div>
  );
}

export default App;

Step 3 – Create Nav Bar Component

In this step, visit the src directory of your react js app and create a navbar component named NavBar.js. And add the following code into it:

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

class NavBar extends React.Component{

    render(){
        return(
            <div>
                <div className="row">
                    <div className="col-md-12">
                        <Router>
                            <nav className="navbar navbar-expand-sm bg-dark navbar-dark">
                                <ul className="navbar-nav">
                                    <li className="nav-item active">
                                        <Link to="/" className="nav-link">Home</Link>
                                    </li>
                                    <li className="nav-item">
                                        <Link to="/category/1" className="nav-link">Category 1</Link>
                                    </li>
                                    <li className="nav-item">
                                        <Link to="/category/2" className="nav-link">Category 2</Link>
                                    </li>
                                    <li className="nav-item">
                                        <Link to="/category/3" className="nav-link">Category 3</Link>
                                    </li>
                                </ul>
                            </nav>
                            <br />
                            <Switch>
                                <Route path="/category/:id" children={<Child />} />
                            </Switch>
                        </Router>
                    </div>
                </div>
            </div>
        )  
    }
}

export default NavBar;

function Child() {
    // To use the `useParams` hook here to access
    // the dynamic pieces of the URL.
    let { id } = useParams();
  
    return (
      <div>
        <h2>ID: {id}</h2>
      </div>
    );
  }

Let’s assume you have only 3 urls with id param on page that can be displayed into react js application. And you want to get ids from url.

• On home page under /category/<category_id> URL address, where <category_id> can be any interger number.
• default page for other URLs

To include a variable into an URL address in React Router, you just need to precede the variable name with a colon. In our case, the path will look like this: /category/:category_id.

Note that, For functional components you can use useParams() hook (introduced in React Router v5, requires also React 16.8 or higher).

Step 4 – Add Component in App.js

In this step, you need to add NavBar.js file in src/App.js file:

import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import { BrowserRouter as Router, Switch, Route, Link, useParams } from "react-router-dom";
import NavBar from './NavBar'

function App() {  
    
  return (  
    <div className="App">  
      <NavBar />  
    </div>  
  );  
}  

export default App;

Conclusion

To get parameter in URL in react js. In this tutorial, you have learned how to get parameter in URL in react js app.

Recommended React Posts