Programs

Routing in ReactJS for Beginners [With Examples]

Introduction

Routing in React enables navigation between different components or views within a single-page application. It allows for the dynamic rendering of components based on the current URL. This provides a seamless user experience and facilitates the organisation and structure of the application’s UI. Learn how to use routing in React JS in this blog. 

How Does the Routing Mechanism Work?

Routing in web development is how users navigate between different pages or sections of a website. Each rendering mechanism has its own approach to handling routing when rendering web pages. In the case of Router in React JS, it falls under the category of Client Side Routing. This is part of Client Side Rendering.

Client Side Rendering involves instructing the server to primarily focus on delivering data. The client-side application itself handles the rendering and routing processes. 

In traditional routing approaches, the server would typically provide different index.html files for different pages upon request. However, with Client Side Rendering, the server only returns a single index.html file that acts as the entry point for the application.

This approach offers a seamless experience for Single Page Applications (SPAs) by allowing smooth navigation between different routes using the history API. It enables users to move forward and backwards in the application’s route history while keeping the URL updated accordingly. 

If you want to be adept in ReactJS, consider enrolling in a Full Stack Software Development Bootcamp from upGrad

Installation and the Steps for React Router

You need to follow these steps to install and use React-router-dom:

  • Create a React app using Create React App: Make sure you have already created a React application using Create React App. This tool helps create a new React project with all the necessary configurations.
  • Run the React app with dummy code: Ensure that your React app is running successfully with some dummy code. This means you can view your app in the browser and see the initial content or components displayed.

Once these prerequisites are met, you can proceed with the installation and configuration of React-router-dom. This is to implement dynamic routing in your React application.

Step 1: Open your terminal. Then run the following command:

This command will install the React-router-dom package into your React app. This includes version 6 and its dependencies.

Step 2: Once the installation is complete, you will receive a message in the terminal. The message may vary depending on your system architecture. It could look something like this:

This message confirms that the React-router-dom package has been successfully installed along with its dependencies.

Check out our free technology courses to get an edge over the competition.

Source Code and Snippets

Step 1: After installing React-router-dom, you can verify the successful installation. This is done by checking the package.json file in your project. Look for the “React-router-dom” entry in the “dependencies” section. This should include the installed module and its version.

Step 2: Import and use the BrowserRouter from “React-router-dom” in your index.js main file. This is done to enable routing throughout your application.

Step 3: Using the terminal, you can create directories to organise your components or pages. You can create separate folders or a single folder to contain all your components.

Inside each directory, create a component file. For instance, create a Home.js file inside the Home directory. Create an About.js file inside the About directory. Here is an example of the component code:

Step 4: In your main App.js file, you can define the routes for each component using the Routes and Route components from “React-router-dom”. Specify the desired path. Also, the corresponding component to render.

React Router: Challenges and Debugging

Here are some common challenges you may encounter when working with React Router and strategies for debugging:

  • Route Configuration: Setting up the routes correctly can be challenging, especially when dealing with nested routes or complex route structures. Ensure you accurately define your routes, matching the correct paths and components.
  • Route Matching: Ensure your route paths and components are correctly matched. Small mistakes like typos or missing forward slashes can cause routes to fail. Debug by checking your route definitions and matching them with the URLs you are trying to access.
  • Error Handling: Handle any errors or exceptions that may occur during routing. Implement error boundaries or catch any exceptions thrown during routing operations to prevent crashes. Debug by logging error messages and inspecting the stack trace.

Check Out upGrad’s Software Development Courses to upskill yourself.

How to Use React Router in Typescript

React Router version 5 is commonly used for routing in React applications. However, React Router version 6 is particularly beneficial for TypeScript programmers. This is because it includes built-in type definitions. To start with React Router in TypeScript quickly, install the React-router-dom package and its corresponding TypeScript type definitions. This can be done using the commands:

TypeScript enhances JavaScript by providing additional safety and typing features. This allows programmers to trace and identify issues in their code easily. TypeScript’s type system improves code reliability. It also facilitates better tooling support for development. A Master of Science in Computer Science from LJMU will make learning ReactJS easier. 

React Router Example

Here are a few examples of using React Router for routing in a React application:

Basic Routing:

We set up a basic routing configuration using React Router in this example. The Router component wraps up our application; within it, we define multiple Route components. Each Route specifies a path and the corresponding component to render when that path matches the current URL.

Nested Routing:

In this example, we demonstrate nested routing. The Products component defines its own set of routes within the Switch component. This allows for further routing within the nested component, in this case, rendering different components based on the URL path.

Route Parameters:

In this React routing example, we utilise route parameters to render a user’s profile based on their ID. The :id in the route path is a placeholder that captures the value from the URL. The captured value can then be accessed using the match.params object within the component.

Explore Our Software Development Free Courses

Types of Routers in React Router

There are three commonly used types of routers in React Router:

  • BrowserRouter: This is the most common and widely used type of router. It utilises the HTML5 history API. Specifically, the pushState, replaceState, and popstate events. Their purpose is to synchronise the UI with the URL. It enables navigation by manipulating the browser history, allowing for a seamless user experience.
  • HashRouter: This type of router uses the hash portion of the URL to handle routing. It appends a hash (#) followed by the route to the URL. Hash routing is supported by older browsers that may not fully support the HTML5 history API. While it can also be used in modern browsers, it may result in less clean and SEO-friendly URLs.
  • MemoryRouter: This router keeps the history of URLs in memory without updating the address bar. It is particularly useful in testing non-browser environments such as React Native. The MemoryRouter is mainly used for in-memory routing and doesn’t rely on the browser’s URL.

Components in React Router

React Router provides several components commonly used for implementing routing functionality in React applications. Here are some of the key components:

  • BrowserRouter: This component provides the routing infrastructure for web applications. It uses the HTML5 history API to synchronise the UI with the URL.
  • Route: The Route component defines a route and specifies the component to render when the URL matches the defined path.
  • Switch: The Switch component renders only the first matching route inside it. It ensures that only one route is rendered at a time. This prevents multiple routes from being rendered simultaneously.
  • Link: The Link component creates clickable links that navigate different routes within the application. It generates anchor tags with proper URL paths and handles the navigation without causing a whole page to reload.

In-Demand Software Development Skills

What Is the Difference Between React Router and React Router DOM?

React Router and React Router DOM are closely related but serve slightly different purposes.

Conclusion

If you are an aspiring software and web developer, it is essential that you know routing in ReactJS. It is a widely used library that helps developers implement routing in React-based applications. 

Even after you get your desired job, you must keep upskilling. Enrol in the Executive PG Programme in Full Stack Development from IIITB if you want to upskill yourself as a full-stack developer. This program will help you be indispensable at work and give you IIIT Bangalore alumni status.

Frequently Asked Questions

What is a route React?

A route in React is a JavaScript framework enabling server and client-side routing in React applications.

Can you have multiple routes in React router?

Yes, React Router allows you to define and handle multiple routes in your application, enabling you to map different URL paths to specific components for rendering.

How do I redirect in React routing?

With Router in React JS, you can perform redirects using the component or by programmatically manipulating the history object using functions like history.push() or history.replace().

Want to share this article?

Leave a comment

Your email address will not be published. Required fields are marked *

Our Popular Software Engineering Courses

Get Free Consultation

Leave a comment

Your email address will not be published. Required fields are marked *

×
Get Free career counselling from upGrad experts!
Book a session with an industry professional today!
No Thanks
Let's do it
Get Free career counselling from upGrad experts!
Book a Session with an industry professional today!
Let's do it
No Thanks