In the dynamic world of web applications, Single-Page Applications (SPAs) have become a keystone for creating responsive and more fluid user experiences. Unlike usual websites that require reloading the browser every time the user navigates them, the SPAs update specific parts of the page based on the user's actions. This gives users a smoother and more app-like experience. However, we need an external tool called React Router to manage these internal navigations.
Since we are at a beginner's level but equipped with the fundamental React concepts like components, props, Hooks and JSX, exploring SPAs and React Router can give us more experience. Therefore, we will learn about creating SPAs and navigating with React Router in this article.
What are SPAs?
Single-page applications (SPAs) are websites that operate within a single page and update their content dynamically based on user interactions. Unlike traditional websites, they do not load the new pages to display new information. This provides an app-like experience to the users rather than navigating a website.
To understand how SPAs work, imagine using Facebook. When you click on a post to expand it, the entire page does not reload. Instead, only the post section is updated, creating a seamless and instant transition.
Using SPAs offers several compelling benefits, some of which are mentioned below:
- Better Performance: Since the application fetches only the necessary data from the server and does not require reloading the entire page, it feels much faster and more responsive. Although displaying all the content takes more time when the application loads for the first time, the subsequent navigations are much faster.
- Smooth User Experience: The transitions between pages and views can be made more seamless and even animated since the absence of full page reloads makes the user experience more fluid and uninterrupted.
- More Dynamic Interactions: In SPAs, JavaScript can handle more complex interactions and UI updates since it does not need to send requests to the server for each action. Therefore, more interactivity can be added to the pages without affecting the performance.
In modern web, SPAs are abundantly used and can be seen in social media platforms like Twitter and Facebook, email clients like Gmail and Outlook and many other complex web applications.
The Need for Routing in SPAs – Navigating the User Journey
As stated earlier, SPAs consist of a single HTML page. So, you may ask how the navigation between different sections and pages is handled. So, this is where the need for client-side routing arises in SPAs.
Since SPAs do not make server calls each time the user navigates the application, JavaScript code running in the browser updates the URL in the browser's address bar, dynamically rendering the corresponding components and pages to display the updated content. Since React does not have a built-in mechanism to manage this navigation, we use a third-party library called React Router to handle navigation in SPAs.
What is React Router?
The React Router is a third-party library that is specifically designed and developed to handle navigation and routing in React SPAs. It is a powerful and widely adopted tool that allows you to define your pages and views declaratively and help users navigate between them. The React Router does not use the browser's default mechanism to make new HTTP requests each time the user navigates to a new page. Instead, it intercepts these navigations, updates the browser URL, and displays the React component based on the defined routes. This requires no full-page reloads, ultimately leading to a fast and more engaging user experience.
Installing React Router
Since it is a third-party tool, you need to install it individually. Open the Node terminal or the command prompt, navigate to your project directory and run the following command to install React Router:
npm install react-router-dom
If you use yarn, run the following command:
yarn add react-router-dom
When run successfully, this command will install the React Router DOM in your project library inside the node-modules directory.
Creating Basic Page Components
To see the routing in action, we first need to create our basic pages. Let's create 3 new projects and add the corresponding code in each:
HomePage.js
import React from 'react';
function HomePage() {
return (
Home Page!
This is the first page of our SPA<p>
);
}
export default HomePage;
AboutPage.js
import React from 'react';
function AboutPage() {
return (
About Page!
This is the About page of our SPA<p>
);
}
export default AboutPage;
ContactPage.js
import React from 'react';
function ContactPage() {
return (
Contact Page!
This is the contact page of our SPA<p>
);
}
export default ContactPage;
Core React Router Components: The Navigational Building Blocks
The React Router provides numerous built-in components that allow you to make navigation easier in SPAs. However, the ones that act as the building blocks for your applications are as follows:
BrowserRouter
This component typically wraps your entire React application. It uses the browser's history API to keep the user interface in sync and update its URL. At the application's root, only one instance of the BrowserRouter component should be used. To make it work, go to the index.js file and paste the following code:
// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
);
Route
This component defines the mapping between the URLs and React components that should be displayed when a certain URL is entered in the browser's address bar. For instance, if the URL has /about, the About component should display on the screen. This component usually takes the following props:
- path: The URL that the Route should match.
- element (formerly component): When the path matches the URL, this prop accepts a JSX element.
Routes
The Routes component acts as a container for different route components. It ensures that only the first Route that matches the URL is rendered. This is a crucial component as it prevents multiple components from rendering simultaneously.
Inside App.js, add the following code:
import React from 'react';
import { Route, Routes } from 'react-router-dom';
import HomePage from './HomePage';
import AboutPage from './AboutPage';
import ContactPage from './ContactPage';
import Navigation from './Navigation';
function App() {
return (
<div>
<Navigation />
<Routes>
<Route path="/home" element={<HomePage/> } />
<Route path="/about" element={<AboutPage />} />
<Route path="/contact" element={<ContactPage />} />
</Routes>
</div>
);
}
export default App;
Navigation with Link: The SPA Way to Click
In a traditional website, we use the HTML anchor <a> tag to link different pages and sections. Clicking on these hyperlinks causes the browser to reload the page. Therefore, this approach is useless in React SPAs. So, we use the <Link> component as an alternative to the <a> tag. When a user clicks on the <Link>, instead of running the default browser routine, it updates the browser's URL and the React Router, then matches the URLs with different components, rendering the matched component. This component uses the 'to' prop to specify the URL path. To use this navigation, create a new file named Navigation.js and paste the following code into it:
import React from 'react';
import { Link } from 'react-router-dom';
function Navigation() {
return (
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</nav>
);
}
function App() {
return (
<BrowserRouter>
<Navigation />
<Routes>
<Route path="/" element={<HomePage />} />
<Route path="/about" element={<AboutPage />} />
<Route path="/contact" element={<ContactPage />} />
</Routes>
</BrowserRouter>
);
}
export default App;
The React Router provides us with a convenient way of navigating our React SPAs. Having good hands-on experience with it can take you really far in your web development career. Therefore, I personally recommend that you learn and practice more on navigating SPAs. In the subsequent article, we will explore how to manage complex state updates with the useState() hook.