[Task 6] Routing

[vadym-zinchenko-moc]

• Main repository - https://github.com/MastersAcademy/fe-react-2024
• Design - https://www.figma.com/file/mRAOMdJiAsD8fHSVnYwUl9/React-web-page
• Branch name - task/06-routing

Task Description

In this homework assignment, you will implement routing logic for your website using react-router-dom. The task involves setting up the react-router-dom library, creating a layout component, and defining specific routes. Your app should include a LayoutComponent that consistently displays a header and footer, with dynamic content rendered between them. There will be two main routes: AboutPage and ProductsPage. The AboutPage should serve as the index route. Additionally, if an invalid route is accessed, a Page Not Found message should be displayed along with a link redirecting to the AboutPage.

1. Install react-router-dom library:

• Install the react-router-dom library using npm.

2. Create LayoutComponent:

• Create a LayoutComponent that includes a static Header and Footer.
• Use the Outlet component from react-router-dom to render the main content dynamically between the header and footer.

3. Define AboutPage and ProductsPage routes:

• Set up routes for AboutPage and ProductsPage.
• Ensure that AboutPage is configured as the index route.

4. Handle invalid routes:

• Implement a PageNotFound component to display a message for invalid routes.
• Include a link in the Page Not Found component that redirects users to the AboutPage.

Advance Task Description

(1*)

1. ProductPage Layout:

• Implement the layout for ProductPage following the provided design specifications.
• Ensure the layout includes all necessary components such as product image, description, price, and any other relevant details.

2. Dynamic Route for ProductPage:

• Add a new route for ProductPage that includes a dynamic parameter :id.
• Ensure the route is correctly defined in your routing configuration to handle URLs such as /products/:id.

3. getProduct Request:

• Implement a function getProduct that fetches product data based on the provided id.
• Ensure the function correctly retrieves and returns the product details from the appropriate data source or API.
• Use the fetched product data to populate the ProductPage with the relevant information.

Design

For consistent styling and layout, refer to the Figma design you used in the previous task: React Web Page Design.

Acceptance Criteria for 1

• Mentor is added to pr
• AC copied to pr description
• Link to deployed version is added to pr
• LayoutComponent with a static header and footer, and an Outlet for dynamic content, is added.
• Two routes, AboutPage and ProductsPage, are added.
• The AboutPage is set as the index route.
• A route for invalid pages is added, displaying Page not found with a link to the AboutPage.

Acceptance Criteria for 1*

• The layout for ProductPage is added according to the design.
• An additional route for ProductPage with dynamic parameters :id is added.
• An additional request getProduct is implemented, using the product's id.