Building a Simple React Single Page Application (SPA) with React Router: A Step-by-Step Guide

In this post, I am going to explain how to create a simple React single page application (SPA) with three routes:

1.   Home,

2.   About, and

3.   Contact.

 

You will learn how to use React Router’s core components <BrowserRouter>, <Routes>, and <Route> to enable navigation between different views based on the URL path.

 

Step 1: Go to the post (Quickly Set Up a React Project with Vite: A Step-by-Step), and set up a React Project ‘spa-hello-world’.

 

Project structure looks like below.

 

Step 2: Installing React Router

To implement routing, we need to install the react-router-dom package. This will allow us to use React Router for navigation.

 

Go to the project root folder and execute below command.

npm install react-router-dom

 

Step 3: Let’s create the components Home, About, and Contact, each representing a different page in our app.

 

Create pages folder in src folder and define Home, About and Contact components.

 

Home.jsx

import React from 'react';

const Home = () => {
  return (
    <div>
      <h1>Home Page</h1>
      <p>Welcome to the Home page!</p>
    </div>
  );
};

export default Home;

About.jsx

import React from 'react';

const About = () => {
  return (
    <div>
      <h1>About Page</h1>
      <p>Learn more about us on this page.</p>
    </div>
  );
};

export default About;

Contact.jsx

import React from 'react';

const Contact = () => {
  return (
    <div>
      <h1>Contact Page</h1>
      <p>Get in touch with us through this page.</p>
    </div>
  );
};

export default Contact;

Step 4: Setting up routing in App.jsx file

 

Now, let’s set up routing in App.jsx using the <BrowserRouter>, <Routes>, and <Route> components from react-router-dom.

 

Update App.jsx with the following code.

 

App.jsx

import React from "react";
import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";
import Contact from "./pages/Contact";

const App = () => {
  return (
    <BrowserRouter>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/contact">Contact</Link>
          </li>
        </ul>
      </nav>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </BrowserRouter>
  );
};

export default App;

<BrowserRouter>: This component wraps the entire app to enable routing functionality. It listens to the URL changes and ensures the correct components are rendered when the path changes.

 

<nav>: This defines a basic navigation menu with links to different pages. We use the <Link> component from React Router to create navigational links that don't reload the page.

 

<Routes>: The <Routes> component contains all the possible routes for your app. It's like a switch that renders the appropriate component based on the URL.

 

<Route>: Each <Route> defines a specific path and the component that should be rendered for that path.

 

·      path="/" renders the Home component for the root URL.

·      path="/about" renders the About component.

·      path="/contact" renders the Contact component.

 

 

Step 5: Update main.jsx with below content.

 

main.jsx

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.jsx'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

Step 6: Build and run the application by executing below commands.

  cd spa-hello-world
  npm install
  npm run dev

Open the url ‘http://localhost:5173/’ in browser, you will see below screen.

Click on the link ‘About’, you will see below screen. You can observe that the url also changed.

You can download this application from this link.

Previous                                                    Next                                                    Home