How to Build SPAs With React Router Nested Routes

Single Page Applications (SPAs) have become a staple in modern web development due to their fast loading times and seamless user experiences. One of the most powerful tools for building SPAs in React is React Router, especially when it comes to implementing nested routes. This guide will walk you through the steps to create a SPA using React Router with nested routes.

Understanding React Router

React Router is a popular library that enables routing in React applications. It allows developers to manage navigation and render different components based on the URL, making it perfect for SPAs where you want to switch views without reloading the page.

Setting Up Your React Project

Begin by setting up your React project if you haven’t done so already. You can use Create React App as follows:

npx create-react-app my-spa

Once your project is created, navigate into your project directory:

cd my-spa

Next, install React Router:

npm install react-router-dom

Structuring Your Application

To utilize nested routes effectively, you'll want to set up your components in a way that allows for parent and child relationships. Here’s a basic example structure:

src/
    ├── components/
    │   ├── Home.js
    │   ├── About.js
    │   ├── Dashboard.js
    │   └── Settings.js
    ├── App.js
    └── index.js

Creating the Routes

Open your App.js file and set up your routes using BrowserRouter, Routes, and Route. Here’s how you can set it up with nested routing:

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Dashboard from './components/Dashboard';
import Settings from './components/Settings';
function App() {
    return (
        
            
                } />
                } />
                }>
                    } />
                
            
        
    );
}
export default App;

In the example above, the Dashboard component has a nested route for Settings. This structure allows you to render the Settings component when the URL is /dashboard/settings.

Building Nested Components

Now, let’s create the Dashboard component that will include the nested Settings route. Here’s a simple implementation:

import React from 'react';
import { Outlet, Link } from 'react-router-dom';
function Dashboard() {
    return (
        
            Dashboard
            
                Settings
            
             {/* Renders the nested route components */}
        
    );
}
export default Dashboard;

The Outlet component is essential for rendering the nested routes inside the parent component.

Linking Between Routes

To allow navigation between your routes, use the Link component provided by React Router. This helps keep the SPA nature of your application by avoiding full page reloads. Whenever you want to link to another route, do it like this:

<Link to="/about">About</Link>

Final Touches and Testing

With the basic structure and routing in place, you can now build out your components. Make sure to test your application by running:

npm start

Navigate to different routes to ensure that everything is working as expected. You should see your nested component render correctly under the parent component when navigating to the nested route.

Conclusion

Building SPAs with React Router and nested routes is a straightforward process that allows for a highly organized component structure

How to Build SPAs With React Router Nested Routes