Home / ReactJS

Handling Route Parameters and Query Parameters in ReactJS

When building a web application with ReactJS, handling route parameters and query parameters is an essential skill to master. Route parameters allow us to pass dynamic values in the URL path, while query parameters enable us to pass additional data to the server or share information between different components. In this article, we will explore how we can handle both route parameters and query parameters effectively in ReactJS.

Handling Route Parameters

A route parameter is a placeholder in the URL that can be used to pass dynamic values. Let's say we have a URL pattern like /users/:id, where :id represents the user's ID. To access this parameter in ReactJS, we can use the React Router library.

Install React Router in your project by running the following command: bash npm install react-router-dom
Import the necessary components from React Router: javascript import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
Set up your routes using the Route component: javascript <Router> <Route path="/users/:id" component={User} /> </Router>
Create a component that will display the user's information based on the route parameter: ```javascript const User = ({ match }) => { const userId = match.params.id; // Fetch user data based on the userId // Display the user's information
return (
User
User ID: {userId}

); }; ```
Render the Link component to navigate to the user's page: jsx <Link to="/users/123">User 123</Link>

With these steps, we can now handle route parameters in ReactJS and display the corresponding information based on the dynamic values passed in the URL.

Handling Query Parameters

Query parameters allow us to append additional information to the URL after a question mark (?). For example, /users?id=123&name=John contains query parameters id and name. React Router also provides convenient methods to handle query parameters.

Import the necessary components from React Router: javascript import { BrowserRouter as Router, Route, Link, useLocation } from 'react-router-dom';
Set up your routes using the Route component: javascript <Router> <Route path="/users" component={UserList} /> </Router>
Create a component to display the list of users: ```javascript const UserList = () => { const location = useLocation(); const searchParams = new URLSearchParams(location.search); const userId = searchParams.get('id'); const userName = searchParams.get('name'); // Fetch user data based on the query parameters // Display the list of users
return (
User List
User ID: {userId}
User Name: {userName}

); }; ```
Render the Link component to navigate to the user's list with query parameters: jsx <Link to="/users?id=123&name=John">User List</Link>

By following these steps, we can handle query parameters in ReactJS and utilize the additional information passed in the URL effectively.

Conclusion

In this article, we have explored how to handle both route parameters and query parameters in ReactJS using the React Router library. By understanding how to extract dynamic values from the URL, we can create dynamic and interactive web applications that can respond to different parameter values. Remember to install React Router, set up routes, extract route parameters using match.params, and access query parameters with useLocation and new URLSearchParams.

Handling Route Parameters and Query Parameters in ReactJS