React 17 Routing Example – Get URL Passed Parameters using Router

Routing Tutorial on how to fetch URL Parameters passed into the routing path; In this tutorial, we will focus on router setup in React application and how to pass parameters then get them into the component; this is achieved by using react-router-dom.

We pass parameters or values in the URL to pass data from one route to another; this is a basic operation we usually do to dynamically load different data in a single component. For example, in a list item; clicking on each item we can open the details component but different data, loaded for id sent in the URL parameters.

We will create a Navbar for routing then pass URL parameters to other routes. Then import the useParams hook from react-router-dom to get all the parameter values passed in the URL.

[lwptoc]

How to fetch URL Parameters in React App using Router?

We will be going through these steps to learn React Router and use it to get URL params.

 

Create React Application

To begin with, let’s create a new React application executing the below npx command in the CLI terminal. You can skip this step if you already have a React app.

$ npx create-react-app react-router-app

Move into the application directory

$ cd react-<code class="language-bash">router-app

 

 

Install React Router Dom and Bootstrap Libraries

Execute the following npm command to instal router and bootstrap libraries in react application.

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

 

Create Navigation Bar Component

In the react application, head to src folder and create a navbar component file nav-bar.component.js and update with the following code.

import React from 'react'
import { BrowserRouter as Router, Switch, Route, Link, useParams } from "react-router-dom";
 
class NavBarComponent 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="/item/1" className="nav-link">Item 1</Link>
                                    </li>
                                    <li className="nav-item">
                                        <Link to="/item/2" className="nav-link">Item 2</Link>
                                    </li>
                                    <li className="nav-item">
                                        <Link to="/item/3" className="nav-link">Item 3</Link>
                                    </li>
                                </ul>
                            </nav>
                            <br />
                            <Switch>
                                <Route path="/item/:id" children={<Child />} />
                            </Switch>
                        </Router>
                    </div>
                </div>
            </div>
        )  
    }
}
 
export default NavBarComponent;
 
function Child() {
    //We can use the `useParams` hook here to access
    // the dynamic pieces of the URL.
    let { id } = useParams();
   
    return (
      <div>
        <h2>Item ID: {id}</h2>
      </div>
    );
  }

Above we used Bootstrap classes to create a Navbar component.

We have three URLs each having an ID param that we need to fetch and display in the React application. These IDs will be passed into URL as parameters.

There are three URL with ID attached in the format /item/:id where we are passing the parameter with url.

The Child() function component is placed in the Router <Switch> to pick that parameter value from URL y using the useParams() function and show its value.

 

Adding Navbar Component in App.js

Now, we just need to import our NavbarComponent into the App.js function component as shown below. We also need to import the bootstrap.min.css file to pick bootstrap styling.

import './App.css';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import NavBarComponent from './nav-bar.component';
 

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

export default App;

 

Run React Application

After making the above changes, run the application by hitting the below command.

$ npm start

This will open the application at the localhost:3000 port in the browser.

 

Conclusion

We discussed how to use React Router Dom library and use its useParams() function to get URL parameters very easily. You can check other features and example implementations in the official documentation.