Create Multi-Page Website Using React JS

Building a website would require you to rely on templates that you would customize manually. Reusing the templates and tweaking the elements was preferable because it saves time that would otherwise be useful elsewhere.

React offers a modern solution for developers to get their web applications running within the shortest time possible. Let us face it, it is rare to find web applications with only one page. Most web applications require two or more pages to serve their intended purpose to users.

Single-Page Versus Multi-Page Website

Here is the typical distinction between an SPA(Single-Page Application) and an MPA(Multipage Application).

• SPAs usually work by loading a single HTML page and updating their content dynamically without requiring a refresh.
• MPAs technically work by loading a new page for each route.

Given their differences, the SPAs are preferable to anyone looking to create a web application with fast navigation, whereas MPAs are ideal for persons looking for better SEO aesthetics and management of large sites.

Prerequisite

You require the basic React environment to undertake the task at hand. That means you require Node.js and your preferred code editor (I will use Visual Studio Code) in your system.

• Having knowledge of Navigate on Path.

Project Structure

Let's create a separate directory inside of our main directory to keep each page of multiple pages this will keep things neat and avoid any confusion occasioned by creating a new file.

Approach

This section offers the standard guidelines for creating an MPA web application. In our case, we will create a four-paged website; with Home, Products, Services, and About pages.

Step 1: Create a React App

Get cracking by creating a react application using the create-react-app command in your terminal. Pasting the following React command will initialize a new React project on your code editor.

npx create-react-app my-website

cd my-website

Step 2: Install the React Router

You must install the react-router-dom package because the routing functionalities depend on it. The process is as simple as pasting the React router installation command below inside your terminal.

npm install react-router-dom

Step 3: Create the Pages

Our goal for this section is to create individual components for the Home, Products, Services, and About pages. Create a new folder titled components/ inside the src/ directory as a standard housekeeping measure. Inside the new folder, create four files Home.js, Products.js, Services.js, and About.js.

Homes.js: Paste the following code inside the Home.js file.

// Home.js
import React from 'react';

const Home = () => {
  return (
    <div className="page">
      <h1>Home</h1>
      <p>Welcome to our new Tutorialspoint web page.</p>
    </div>
  );
};

export default Home;

Products.js: Paste the following code inside the Products.js file.

// Products.js
import React from 'react';

const Products = () => {
  return (
    <div className="page">
      <h1>Products</h1>
      <p>Here is the new Tutorialspoint products catalog.</p>
    </div>
  );
};

export default Products;

Servoices.js: Paste the following code inside the Servoices.js file.

// Services.js
import React from 'react';

const Services = () => {
  return (
    <div className="page">
      <h1>Services</h1>
      <p>Explore the various services offered by Tutorialspoint.</p>
    </div>
  );
};

export default Services;

About.js: Paste the following code inside the About.js file.

// About.js
import React from 'react';

const About = () => {
  return (
    <div className="page">
      <h1>About</h1>
      <p>Connect with Tutorialspoint on this web page.</p>
    </div>
  );
};

export default About;

Step 4: Setup Routing using React Router

Here, tasks involve editing the App.js folder by importing the react-router-dom and four pages that we have created.

App.js: Locate the App.js folder and paste the following code inside it.

// Enable the react-router-dom functinality
import React from 'react';
import { BrowserRouter as Router, Route, Link, Routes } from 'react-router-dom';
import Home from './components/Home';
import Products from './components/Products';
import Services from './components/Services';
import About from './components/About';

// Imort the styling from App.css
import './App.css';

function App() {
  return (
    <Router>
      <div>
        <nav className="navbar">
          <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/products">Products</Link></li>
            <li><Link to="/services">Services</Link></li>
            <li><Link to="/about">About</Link></li>
          </ul>
        </nav>

        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/products" element={<Products />} />
          <Route path="/services" element={<Services />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

Step 7: Add Basic Styling

Add basic CSS styling to enhance the user experience for your project. Locate the App.css folder and include the following styles inside it.

App.css: Locate the App.css folder and paste the following code inside it.

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.navbar {
  background-color: #333;
  padding: 1em;
}

.navbar ul {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: space-around;
}

.navbar ul li {
  display: inline;
}

.navbar ul li a {
  color: white;
  text-decoration: none;
  padding: 8px 16px;
  transition: background-color 0.3s;
}

.navbar ul li a:hover {
  background-color: #575757;
  border-radius: 4px;
}

.page {
  padding: 20px;
  text-align: center;
}

.page h1 {
  color: #333;
}

.page p {
  font-size: 1.2em;
  color: #666;
}

Output

Fire up the React development server npm start on the terminal.