React Router Tutorial: How to Add Navigation to Your React App

Building dynamic and interactive web applications often requires the ability to seamlessly navigate between different views or components. Have you ever wanted your React app to behave like a multi-page website while keeping all the speed and simplicity of a single-page application? That’s where React Router is the ultimate choice.

Although there are multiple ways to implement routing in React applications, such as by creating custom Hooks. However, this approach is time-consuming, as it requires creating separate Hooks for individual features. Instead of creating custom Hooks, we can use React Router—a powerful library that enables developers to implement routing in React applications, allowing users to navigate through various components without the need for full page reloads. Top companies like Facebook, Netflix, Microsoft, and Discord all use this library.

In this blog, we’ll explore how to add navigation to your React app using React Router, understand its core concepts, and delve into its benefits for single-page applications (SPAs).

What is React Router?#

React Router is a library for routing in React applications. It allows us to set up navigation between different components in a React app. It also allows changing the browser URL and keeps the UI consistent with the relevant route. At its core, React Router uses a component-based approach to routing, which means you can create declarative routing in your React app. It provides various routing components according to the needs of the application and platform.

Why use React Router?#

• Dynamic routing: Unlike traditional routing where routing is handled outside of the application, React Router allows routing to be handled as the app renders on the client side.

• Single-page applications (SPAs): It enables the creation of SPAs in which the page does not reload when navigating between views, providing a smoother user experience.

• Component structure: It uses a component structure to call components based on the route, which integrates naturally with React’s component-based architecture.

Client-side vs. server-side routing#

We can’t discuss routing and React Router without mentioning the client and server sides. Client-side routing means that the routing is handled within the browser using JavaScript without requiring a full page reload from the server. Some benefits of this include:

• Faster page transitions.

• Better user experience as only the necessary components are re-rendered.

• Reduces server load since not every navigation requires a new page from the server.

Server-side routing refers to routing that is handled by the server where each navigation request results in a new page being served. Some benefits of this include:

• Better for search engine optimization (SEO) since search engines can crawl all the pages.

• The initial page load can be faster as the server sends a fully rendered page.

React Router facilitates client-side routing, allowing you to build SPAs that provide a smooth and responsive user experience.

Single-page applications (SPAs)#

Before diving into the details of implementing React Router in a React application, it’s important to understand what single-page applications (SPAs) are.

A single-page application (SPA) is a web application that dynamically rewrites the current web page with new data from the server instead of the browser’s default method of loading entire new pages. When a user clicks a link, they don’t go to an entirely new page. Instead, the new context loads inline on the same page they are already on. So, only the necessary components of the page are rendered.

Some of the challenges addressed by React Router in SPAs are as follows:

• Navigation and deep linking: Allows users to navigate using URLs that represent different views or states in the application.

• Browser functionality: Enables the use of the browser’s back and forward buttons, which are essential for user experience.

• SEO considerations: While SPAs often face SEO challenges due to dynamic content loading, React Router can be combined with server-side rendering (SSR) or static site generation (SSG) to address these challenges effectively.

Set up navigation with React Router in a React app#

To use React Router in your project, follow the steps below:

Step 1: Install React Router DOM#

Before installing the react-router-dom library, ensure that we have Node.js and npm installed. Once installed in the project directory, run the following command in the terminal:

Step 2: Wrap your app with <BrowserRouter>#

In your index.js file, wrap the root component with <BrowserRouter> to enable routing throughout the app. A sample index.js file will look something like this:

Note: It’s essential to wrap your entire app with <BrowserRouter> to make routing available throughout the component tree.

Step 3: Create the components#

We will create three main components for our application—Home, About, and NavBar.

In the NavBar.js file, we import the <Link> from react-router-dom that enables navigation to different components of our application. The <Link> component updates the URL and renders the corresponding component without reloading the page, preserving the state of the application.

Step 4: Define routes in App.js file#

Next, define all the routes of the application in the root component, which is the App component residing in the App.js file.

We will dive a little deep into the details of the components being used from react-router-dom in the App.js file.

<Routes> and <Route>#

Let’s look at the <Routes> and <Route> components first.

• <Routes>: Replaces <Switch> in React Router v6. It iterates over its children <Route> elements and picks the first one that matches the current URL.

• <Route>: Defines a route within the application. It accepts two main props:

  • path: The URL path to match.

  • element: The component to render when the path matches.

Redirects with <Navigate>#

The purpose of the <Navigate> component is to redirect the user to a different route. It accepts two main props:

• to: The path to navigate to.

• replace: If true, replace the current entry in the history stack instead of adding a new one.

Catch-all route for 404 pages#

The purpose of the catch-all route is to handle undefined routes and display a 404 message. It accepts two main props:

• path="*": Matches any route that hasn’t been matched by previous <Route> components.

• element: The component to render when no path is matched.

Step 5: Run the application#

Now that the routes are set and the components have been created. Start the server and navigate to http://localhost:3000/ in the browser to see the application.

You can test the application by clicking the “Home” or “About” link in the navigation bar. The content on the page will change based on the component rendered when the URL changes.

When on the http://localhost:3000/about URL, if you click the “Unknown URL” link, you should see “404 Page Not Found” rendered on the page. This ensures React Router catches the unknown route and displays the relevant message.

Configuring Nested routes in React#

Nested routes allow you to render child components within a parent component’s layout. This is useful for creating layouts where certain components remain consistent while other content changes based on the route. Essentially, they allow the parent Route to wrap around the child Route and control its rendering.

Let’s enhance our existing example, which includes the Home, About, and NavBar components, by adding nested routes. We’ll modify the About page to include nested content for privacy policy and history.

Step 1: Create nested components#

We’ll start by creating additional components that we will use for our nested routes.

Step 2: Update routes in App.js#

We’ll need to modify the App.js file to include nested routes under the /about path. We’ll change the /about path to "/about/*" indicating that this route will handle all paths that start with /about/. Inside this parent route, we’ll define child routes for privacy and history.

Note: The * in path="/about/*" tells React Router to match all child routes under /about.

Step 3: Update the About component#

We need to modify About.js file to include navigation links for the nested routes and a <Outlet> component from react-router-dom to render the nested components.

The <Outlet> component in React Router is a placeholder that tells React Router where to render the child Route components inside the parent Route. For our example, we have the About component as the parent Route, and Team and History components as its child Routes, the <Outlet> determines where within the About component the PrivacyPolicy or History components will be rendered.

In the About component, the Link components use relative paths ("team" and "history"), which are appended to the parent route /about/.

Now, if we navigate to the /about page and click the “Our Team” link, the URL changes to http://localhost:3000/about/team. The Team component is rendered within the About component. The same will happen if we click the “Our History” link.

Benefits of using React Router#

1. Routes are declared in your JSX, making your code more readable and easier to maintain.

2. Unlike traditional routing, React Router handles routing dynamically as the app renders. This means routes can be added or modified based on the app’s state or user interactions.

3. It provides smooth navigation without full page reloads, enhancing the user experience by making the application feel faster and more responsive.

4. It supports nested routing, which ensures that routes and components are organized hierarchically, mirroring the application’s structure. Also, different parts of the UI can change based on the nested route without reloading the entire parent component.

Limitations of React Router#

1. For beginners, understanding the concepts of dynamic routing, nested routes, and Hooks can be challenging.

2. Adding React Router increases the application’s bundle size, which might impact performance in applications where minimal size is critical.

3. For very simple applications with minimal routing needs, using React Router might be unnecessary overhead. In such cases, simpler solutions or even basic conditional rendering might suffice.

Wrapping up#

React Router is an essential tool for building dynamic and responsive React applications. By managing navigation and rendering components based on the URL, it enhances the user experience and provides developers with powerful tools to create SPAs.

With the latest updates in React Router v6 and React 18, routing in React has become more straightforward and efficient. Whether you’re building a simple website or a complex application, understanding React Router will significantly improve your development workflow.