Phase 1: Routing

Understand the Problem

We need to create a React app that uses client-side routing to display different pages based on the URL path. The app must always show a navigation bar, handle different routes (like home, fruit details, form, and favorite views), and display a fallback for unknown paths. The goal is to ensure each page has its own dedicated view while sharing global navigation.

Devise a Plan

1. Import React Router components (BrowserRouter, Routes, Route)
2. Render <Navigation /> component above all routes
3. Create a route for each page: home, form, show, favorite, set favorite
4. Add a fallback route for all unmatched URLs

Carry Out the Plan

File: src/App.jsx

// Pseudocode:
// 1. Wrap the app in <BrowserRouter>
// 2. Always show <Navigation>
// 3. Set up <Routes> with all the necessary paths
// 4. Use * for fallback route

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Navigation from './Navigation';
import FruitsIndex from './FruitsIndex';
import FruitShow from './FruitShow';
import FruitForm from './FruitForm';
import FavoriteFruit from './FavoriteFruit';
import SetFavoriteFruit from './SetFavoriteFruit';
import fruits from './mockData/fruits.json';

function App() {
  return (
    <BrowserRouter>
      <Navigation />
      <Routes>
        <Route path="/" element={<FruitsIndex fruits={fruits} />} />
        <Route path="/fruits/:fruitId" element={<FruitShow fruits={fruits} />} />
        <Route path="/fruits/new" element={<FruitForm fruits={fruits} />} />
        <Route path="/fav-fruit" element={<FavoriteFruit fruits={fruits} />} />
        <Route path="/set-fav-fruit" element={<SetFavoriteFruit fruits={fruits} />} />
        <Route path="*" element={<p>Page Not Found</p>} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

Expected Input and Output

• Input: Visiting /
• Output: Renders <FruitsIndex />
• Input: Visiting /fruits/1
• Output: Renders <FruitShow /> with fruitId param
• Input: Visiting unknown route /random
• Output: Renders fallback: “Page Not Found”

Explanation for New Developers

Think of routing like hallway signs in a building. Each sign points to a different room. In a React app, the BrowserRouter watches the browser address bar and tells React which component to show, based on that path.

We use Route to tell the app: “If someone goes to /, show the home page. If they go to /fruits/2, show the page for fruit #2.”

The <Navigation /> is placed above <Routes /> so it always appears, no matter which page you’re on.

Real World Analogy

Imagine a museum with a floor plan. Each gallery is a different exhibit. The router is your map, and clicking a link is like walking to a new exhibit. The navigation bar is the info desk that's always visible, helping you get around.

Bonus Tip

Want to add animations between pages? Check out libraries like Framer Motion or transition groups in React for seamless effects.