Get Parameters in URL in React js with Router

To get parameter in URL in react js. In this tutorial, i am going to show you in detail how to get parameters in URL in react js app using react router.

React Router is a standard library for routing in React. It enables the navigation among views of various components in a React Application, allows changing the browser URL, and keeps the UI in sync with the URL.

URL parameters are parameters whose values are set dynamically in a page’s URL. This allows a route to render the same component (UI) while passing that component the dynamic portion of the URL so it can change based off of it.

How to Get Parameter in URL in React js with Router

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

Step 1 – Create React App

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

Go to 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 – Import Nav Component In App.js

Import 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