How to create multiple page app using react

Creating Multi-Page Applications (MPA) with React typically requires additional tools and techniques, as React is fundamentally designed for building Single-Page Applications (SPA). Below, I will outline several common approaches to implementing Multi-Page Applications in React:

1. Using React Router

The most common method involves leveraging the React Router library to simulate Multi-Page Application behavior. React Router enables you to define multiple routes, each loading distinct components, thereby creating a user experience that mimics Multi-Page Applications. Although technically this remains a Single-Page Application due to dynamic content loading, the user experience closely resembles that of a traditional Multi-Page Application.

Example Code:

jsx
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import HomePage from './HomePage';
import AboutPage from './AboutPage';
import ContactPage from './ContactPage';

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/" exact component={HomePage} />
        <Route path="/about" component={AboutPage} />
        <Route path="/contact" component={ContactPage} />
      </Switch>
    </Router>
  );
}

2. Using Multiple HTML Entry Points

Another approach involves configuring multiple entry points in the build process (e.g., Webpack). This allows you to establish independent React root instances for each page, making it closer to traditional Multi-Page Applications where pages are fully self-contained. Shared state can be managed through local storage, cookies, or server-side solutions.

Webpack Configuration Example:

js
module.exports = {
  entry: {
    homepage: './src/homepage.js',
    aboutpage: './src/aboutpage.js',
    contactpage: './src/contactpage.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: __dirname + '/dist'
  },
  // Other configurations...
};

Each page's React code is developed independently, with the corresponding bundle file included in the respective HTML file.

3. Using Server-Side Rendering (SSR)

Server-Side Rendering (SSR) generates fully rendered HTML pages, so each page is delivered as pre-rendered content upon access. Frameworks like Next.js facilitate this implementation, supporting automatic code splitting and optimization—making it ideal for building Multi-Page Applications.

Next.js Example:

jsx
// pages/index.js
function HomePage() {
  return <div>Welcome to the Home Page</div>;
}

// pages/about.js
function AboutPage() {
  return <div>Welcome to the About Page</div>;
}

// pages/contact.js
function ContactPage() {
  return <div>Contact Us</div>;
}

In Next.js, each page automatically becomes a route without requiring additional configuration.

Summary

Depending on project requirements, select the appropriate method for building React Multi-Page Applications. For better SEO performance or faster initial load times, consider SSR or the multiple entry point approach. If you prioritize frontend routing flexibility and Single-Page Application advantages, React Router is typically the better choice. Each method has specific use cases and trade-offs.