Nested Routes and Route Parameters in React JS

React Router allows for building sophisticated navigation systems in React applications, supporting features like nested routes and route parameters. In this article, we will explore how to define nested routes and work with dynamic route parameters in React JS.

What are Nested Routes?

Nested routes allow you to render child routes inside a parent route. This feature is useful when you want to organize your routes hierarchically, rendering specific components within a parent component based on the active route.

Example: Nested Routes

In this example, we will create a basic application where the "Dashboard" component has nested routes for "Profile" and "Settings".

          
              import React from 'react';
              import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

              function Dashboard() {
                  return (
                      

                          
Dashboard

                          

                          
                          
                      

                  );
              }

              function Profile() {
                  return 
Profile Page
;
              }

              function Settings() {
                  return 
Settings Page
;
              }

              function App() {
                  return (
                      
                          

                              
React Nested Routes Example

                              
                              
                          

                      
                  );
              }

              export default App;

In this example:

  • The Dashboard component is the parent route, and it contains two nested routes: /dashboard/profile and /dashboard/settings.
  • The Link components inside the Dashboard allow navigation to these nested routes without page reloads.
  • The child routes are rendered inside the Dashboard component based on the active URL.

What are Route Parameters?

Route parameters are dynamic parts of a route that can be used to pass data into a component based on the URL. For example, you might use route parameters to display a specific blog post or user profile based on the URL.

Example: Route Parameters

In this example, we will create a route that accepts a user ID as a parameter, and the component will display the user details based on the ID.

          
              import React from 'react';
              import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

              function UserProfile({ match }) {
                  return 
User Profile for ID: {match.params.userId}
;
              }

              function App() {
                  return (
                      
                          

                              
React Route Parameters Example

                              

                              
                          

                      
                  );
              }

              export default App;

In this example:

  • The route /user/:userId contains a parameter :userId. This will match any URL in the form of "/user/{id}" and make the ID available in the component.
  • The UserProfile component receives the match prop, which contains the params object. We use match.params.userId to access the user ID from the URL.
  • When the user clicks on a link like /user/1, the corresponding user profile will be displayed with the ID in the URL.

Combining Nested Routes and Route Parameters

You can also combine nested routes with route parameters to build complex URL structures. Below is an example where a parent route (Dashboard) contains nested routes, and one of those nested routes accepts a route parameter.

Example: Nested Routes with Route Parameters

          
              import React from 'react';
              import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

              function Dashboard() {
                  return (
                      

                          
Dashboard

                          

                          
                      

                  );
              }

              function UserProfile({ match }) {
                  return 
User Profile for ID: {match.params.userId}
;
              }

              function App() {
                  return (
                      
                          

                              
Nested Routes and Route Parameters Example

                              
                          

                      
                  );
              }

              export default App;

In this example:

  • The Dashboard component contains links to user profiles with dynamic IDs (/dashboard/user/:userId).
  • When a user clicks on a link, the route parameter :userId is passed to the UserProfile component, and the corresponding user information is displayed.

Conclusion

Nested routes and route parameters are powerful features of React Router that help you build complex, hierarchical navigation systems in React applications. Nested routes allow you to organize your application’s views more efficiently, while route parameters enable dynamic content based on the URL. Understanding how to use these features will make it easier to create sophisticated React applications with clean and maintainable routing logic.




Advertisement