Module 1 Project - React Router

Project Overview

In this project, you will build a multi-page React application that demonstrates your understanding of React Router. You will create a navigation system that allows users to move between different views of your application.

Project Requirements

Routing Requirements

Set up React Router in your application
Create at least 3 different routes
Implement a navigation menu that appears on all pages
Use URL parameters to display dynamic content
Implement programmatic navigation for form submissions

Component Requirements

Create a shared layout component
Implement a navigation component
Create separate components for each route
Use proper component composition

Functionality Requirements

Implement protected routes
Handle 404 errors with a custom error page
Use route parameters to fetch and display data
Implement proper loading states

Project Setup

# Create a new React project
npx create-react-app router-project

# Install dependencies
cd router-project
npm install react-router-dom

# Start the development server
npm start

Project Structure

src/
  ├── components/
  │   ├── Layout/
  │   │   ├── Navigation.js
  │   │   └── Footer.js
  │   └── common/
  │       ├── Loading.js
  │       └── ErrorBoundary.js
  ├── pages/
  │   ├── Home.js
  │   ├── About.js
  │   ├── Products.js
  │   ├── ProductDetail.js
  │   └── NotFound.js
  ├── utils/
  │   └── auth.js
  └── App.js

Example Implementation

// App.js
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Layout from './components/Layout/Layout';
import Home from './pages/Home';
import About from './pages/About';
import Products from './pages/Products';
import ProductDetail from './pages/ProductDetail';
import NotFound from './pages/NotFound';

function App() {
  return (
    <Router>
      <Layout>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/products" element={<Products />} />
          <Route path="/products/:id" element={<ProductDetail />} />
          <Route path="*" element={<NotFound />} />
        </Routes>
      </Layout>
    </Router>
  );
}

export default App;