React Router Hands-On Exercise

This project is a React Router exercise that demonstrates various routing concepts and navigation patterns.

Exercise Missions

Complete the following steps to build a fully functional React Router application:

1. Set up BrowserRouter

Add <BrowserRouter> to main.tsx to enable routing throughout your application. Wrap your <App /> component with <BrowserRouter>.

2. Configure Routes

In App.tsx, set up your routes using <Routes> and <Route> components. Create routes for:

• / - Homepage
• /about - About Us page
• /contact - Contact page

Important: Test that you can navigate to all three pages directly through their URLs in the browser.

3. Add Navigation Menu

Add a navigation menu to each page that links to the other two pages:

• Homepage should have links to "About Us" and "Contact"
• About Us should have links to "Homepage" and "Contact"
• Contact should have links to "Homepage" and "About Us"

Use the <Link> component from react-router for navigation.

4. Handle 404 Errors

Configure a catch-all route (path="*") that displays the NotFound.tsx page when users navigate to non-existent routes.

5. Programmatic Navigation with useNavigate

Add a "Go Home" button to both the About Us and Contact pages. Instead of using <Link>, use the useNavigate hook for programmatic navigation.

Note: There are two ways to implement this.

6. Extract URL Parameters with useParams

In User.tsx, use the useParams hook to extract the id parameter from the URL and display it on the screen. The route should be configured as /user/:id.

7. Navigation from Homepage to /user/:id

From the Homepage, demonstrate both navigation methods:

• Navigate to /user/123 using programmatic navigation (useNavigate)
• Navigate to /user/456 using declarative navigation (Link component)

Project Structure

src/
├── pages/
│   ├── HomePage.tsx
│   ├── AboutUs.tsx
│   ├── Contact.tsx
│   ├── User.tsx
│   └── NotFound.tsx
├── App.tsx
└── main.tsx