> For the complete documentation index, see [llms.txt](https://reactjs.koida.tech/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://reactjs.koida.tech/multi-page-applications-mpas/multi-page-react-application.md).

# Multi-Page React Application

### **Setting Up React Router**

1.  **Introduction to Multi-Page Applications (MPAs):**
   * Understanding the difference between Single Page Applications (SPAs) and MPAs.
   * Benefits of using MPAs in React: improved SEO, better organization, and scalability.
2. **Setting Up React Router:**

* Install React Router: `$npm install react-router-dom`
* Import BrowserRouter and set up routing in `App.jsx`:

  ```jsx
  import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
  import Home from './pages/Home';
  import About from './pages/About';
  import Contact from './pages/Contact';

  function App() {
    return (
      <BrowserRouter>
        <nav>  {/* Navigation Links */}
          <Link to="/">Home</Link> | <Link to="/about">About</Link> | <Link to="/contact">Contact</Link>
        </nav>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
        </Routes>
      </BrowserRouter>
    );
  }

  export default App;
  ```

**3. Creating Components for Different Pages:**

* Create a `pages` folder with separate files: **`Home.jsx`**, **`About.jsx`**, and **`Contact.jsx`**.
* Example of a simple **`Home.jsx`** component:

  ```jsx
  function Home() {
    return (
      <div>
        <h1>Welcome to the Home Page</h1>
        <p>This is the main page of our multi-page React application.</p>
      </div>
    );
  }

  export default Home;
  ```

**4. Adding Navigation:**

* Use the `Link` component from React Router to create navigation:

  ```jsx
  import { Link } from 'react-router-dom';

  function Navbar() {
    return (
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
        <Link to="/contact">Contact</Link>
      </nav>
    );
  }

  export default Navbar;
  ```
* Include `Navbar` in `App.jsx` to provide consistent navigation if you want to use a separate Navbar component.

**5. Handling 404 Errors:**

* Add a catch-all route to handle undefined paths:

  ```
  <Route path="*" element={<h1>404 - Page Not Found</h1>} />
  ```

**6. Styling the Application:**

* Use Tailwind CSS or standard CSS to style your pages and navigation.

**Explanation of Key Concepts:**

* **React Router:** A library for handling navigation in React applications. In this context, it provides client-side routing within the MPA structure, making navigation feel faster.
* **`BrowserRouter`:** A component that creates a routing context.
* **`Routes`:** A component that defines the set of routes for the application.
* **`Route`:** A component that maps a specific URL path to a React component.
* **`Link`:** A component for creating navigation links.