This exercise aims to help students get comfortable with using React Router Outlet and nested routes. Students will create a simple React application that displays a list of fruits and their details using nested routes and the Outlet component.
-
Clone the repository:
git clone https://github.com/turingschool-examples/FruitBox.git
-
Navigate to the project directory:
cd FruitBox
-
Install dependencies:
npm install
-
Start the development server:
npm start
src/
components/
App/
App.js
App.css
Fruits/
Fruits.js
Fruits.css
FruitDetails/
FruitDetails.js
FruitDetails.css
data/
fruitData.js
index.js
In App.js
, set up the main structure of the application. Use NavLink
for navigation and define the routes for the application.
In Fruits.js
, fetch and display a list of fruits. Each fruit should be a link that navigates to a detailed view of that fruit.
In FruitDetails.js
, fetch and display the details of a selected fruit based on the route parameter.
In fruitData.js
, create a function that returns a list of fruits with their details.
Add basic styling in App.css
, Fruits.css
, and FruitDetails.css
to make the application look better.
Create a fruitData.js
file with the following content:
export const getFruitsData = () => [
{ id: '1', name: 'Apple', description: 'A sweet red fruit.', image: '/images/apple.jpg' },
{ id: '2', name: 'Banana', description: 'A long yellow fruit.', image: '/images/banana.jpg' },
{ id: '3', name: 'Cherry', description: 'A small red fruit.', image: '/images/cherry.jpg' },
];
This exercise will guide you through creating a simple application using React Router with nested routes and the Outlet component. You will practice setting up routes, using parameters, and rendering nested content.