Get Parameters in URL in React js with Router

The react-router query params hook helps users to get query parameters in React JS applications. In this tutorial, we will show you how to get parameters in URL using router in react js.

How to Get Parameter in URL in React js with Router

Steps to get parameter in URL using a router:

Step 1 – Create React App

Run 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

Run the following commands to install react router and bootstrap 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