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.
