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, Routes, Route, Navigate } 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';
import { isAuthenticated } from './utils/auth';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />
          <Route path="about" element={<About />} />
          <Route path="products" element={<Products />} />
          <Route path="products/:productId" element={<ProductDetail />} />
          <Route path="admin" element={
            isAuthenticated() ? <Admin /> : <Navigate to="/login" />
          } />
          <Route path="*" element={<NotFound />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

export default App;


// components/Layout/Layout.js
import { Outlet, Link } from 'react-router-dom';
import Navigation from './Navigation';
import Footer from './Footer';

function Layout() {
  return (
    <div className="app-container">
      <Navigation />
      <main className="main-content">
        <Outlet />
      </main>
      <Footer />
    </div>
  );
}

export default Layout;

Additional Resources

React Router Tutorial Outlet Component Documentation useParams Hook Documentation Navigate Component Documentation

Submission

Submit your project by pushing your code to GitHub and sharing the repository link with your instructor.

Back to Module Project Template