Introduction to React Router

React applications often require navigation between different pages or views, such as Home, About, Projects, or Contact pages. Traditionally, this is done by manually managing state or creating multiple HTML files. However, as applications grow, this approach becomes cumbersome and lacks essential features like seamless navigation and URL-based routing. Let’s explore a scenario to build a small web application using conventional web development techniques and understand the challenges it presents. We’ll then solve the same scenario using React Router to highlight its benefits.

Case study: A portfolio application

We need to build a portfolio website with the following pages:

• Home: A welcome page.

• About: Information about the individual.

• Projects: A showcase of completed projects.

• Contact: A page to get in touch.

Implementation without React Router

First, we’ll implement it without React Router to understand the limitations of managing navigation manually.

Limitations of manual navigation approach

• No URLs for pages: The application does not use unique URLs for each page, making it impossible to bookmark or share links.

• Poor user experience: Refreshing the browser resets the app to the default state (Home page).

• Manual management: Adding new pages requires updating the renderPage function and navigation bar manually.

• SEO issues: Search engines cannot crawl individual pages due to the lack of URLs.

To address these limitations, we can use React Router, a powerful library designed to handle routing in React applications.

React Router

React Router is the de-facto standard for handling routing in React applications. It allows developers to define routes, navigate between views, and manage URL parameters efficiently. With its robust features and integration capabilities, React Router is essential for building modern single-page applications (SPAs).

Single-page applications (SPAs)

A single-page application (SPA) is a web application that dynamically loads and updates content on a single HTML page. Instead of fetching a new HTML file for each route, SPAs render content dynamically based on the URL. This improves performance and creates a smoother user experience.

Rebuilding the portfolio application using React Router

Here is the same portfolio application implemented using React Router:

Note: Don’t worry about the new coding constructs like Router, Routes, Route, and Link. We will explore these in detail in the upcoming lessons.

Benefits of using React Router

• Seamless navigation: No full-page reloads; transitions between views are smooth and fast.

• URL-based routing: Each route has a unique URL, making it easier to bookmark and share links.

• Dynamic and scalable: Adding new routes is as simple as defining a new Route component.

• Improved SEO: SPAs with React Router can be optimized for SEO using server-side rendering or pre-rendering tools.

By transitioning from a manual approach to using React Router, we resolved the limitations of traditional navigation.

Comparison matrix: Manual navigation vs. React Router

Below is a detailed comparison of manual navigation and React Router to highlight their differences and help us understand why React Router is preferred for modern web applications.

Key takeaways

• Manual navigation is a quick and straightforward approach for small applications but is not scalable or efficient for larger projects.

• React Router introduces robust navigation and routing features essential for building modern, scalable, and user-friendly SPAs.