How to Get Parameters in URL in React js with Router

How to Get Parameters in URL in React js with Router

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.

Sometimes, you work in react js app and want to get parameters in URL in react js app. So, in this example tutorial will learn step by step on how to get parameter in URL in react js using react router.

This example tutorial will create a navbar and import “useParams” hook from “react-router-dom” in react js app. And using this useParam hook, you can get all the parameters in URL in react js app.

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

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Vue JS, Angular JS, React Js, WordPress, and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

Your email address will not be published. Required fields are marked *