Objective

Learn how to create a dynamic route in a React application using React Router v6. Implement a route that changes its content based on URL parameters.

Setup

1. Create an 'Exercises' Directory (If not already done):

   • If you haven't already, create a main directory on your local machine to house all your exercises. You can do this using mkdir Exercises.

2. Fork the Repository:

   • Navigate to the GitHub repository for this exercise at 03-22-basic-dynamic-routing.
   • Click on the 'Fork' button to create a fork of the repository.

3. Clone Your Forked Repository:

   • Open your terminal.
   • Navigate to your Exercises directory using cd path/to/Exercises.
   • Run git clone <your-forked-repo-url> to clone the repository to your machine.
   • This will create a new directory named 03-22-basic-dynamic-routing under Exercises.

4. Initial Setup:

   • The repository already includes the skeleton code generated by Create React App.
   • Navigate to the exercise directory: cd 03-22-basic-dynamic-routing.
   • Run npm install to install the necessary dependencies.
   • Start the development server with npm start.

Exercise Instructions

1. Implement a Dynamic Route:

   • In the App component, include a dynamic route using React Router. The route should be in the format /user/:username.
   • Create a new component named UserProfile within your application. This component should display a greeting message that incorporates the username from the URL. For example, navigating to /user/john should display "Hello, John!" on the page.

2. Add Links for Testing the Dynamic Route:

   • Within your application, preferably on the main page, add several Link components from react-router-dom.
   • These links should navigate to different user profiles. For example, add a link that navigates to /user/mick. When clicked, this link should lead to a page displaying "Hello, Mick!".
   • Include at least three different links, each pointing to a different username in the URL. Example usernames could be mick, alice, and steve. Ensure each link correctly routes to the UserProfile component and displays the appropriate greeting.

3. Test the Dynamic Routing:

   • After implementing the UserProfile component and adding the links, test your application.
   • Click on each link to ensure that the application routes correctly and that the UserProfile component displays the correct username based on the URL.

Submission

1. Commit Your Changes:

   • After completing the exercise, ensure all your changes are saved.
   • Run git add . to stage your changes.
   • Run git commit -m "Completed Basic Dynamic Routing exercise" to commit your changes.

2. Push to Your Fork:

   • Run git push to push your commits to your forked repository on GitHub.

3. Create a Pull Request:

   • Go to your forked repository on GitHub.
   • Click on 'Pull Request' to create a new pull request to the original repository.
   • Ensure the pull request details are filled out, explaining the changes you made.