# 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://reactjs.koida.tech/multi-page-applications-mpas/multi-page-react-application.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.