You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
The text was updated successfully, but these errors were encountered:
Task Description
In this homework assignment, you will implement routing logic for your website using
react-router-dom
. The task involves setting up thereact-router-dom
library, creating a layout component, and defining specific routes. Your app should include aLayoutComponent
that consistently displays aheader
andfooter
, withdynamic content
rendered between them. There will be two main routes:AboutPage
andProductsPage
. TheAboutPage
should serve as theindex
route. Additionally, if an invalid route is accessed, aPage Not Found
message should be displayed along with a link redirecting to theAboutPage
.1. Install
react-router-dom
library:react-router-dom
library usingnpm
.2. Create
LayoutComponent
:LayoutComponent
that includes a staticHeader
andFooter
.Outlet
component fromreact-router-dom
to render the main content dynamically between the header and footer.3. Define
AboutPage
andProductsPage
routes:AboutPage
andProductsPage
.AboutPage
is configured as theindex
route.4. Handle invalid routes:
PageNotFound
component to display a message for invalid routes.Page Not Found
component that redirects users to theAboutPage
.Advance Task Description
(1*)
1.
ProductPage
Layout:ProductPage
following the provided design specifications.2. Dynamic Route for
ProductPage
:ProductPage
that includes a dynamic parameter:id
./products/:id.
3.
getProduct
Request:getProduct
that fetches product data based on the providedid
.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
LayoutComponent
with a staticheader
andfooter
, and anOutlet
for dynamic content, is added.AboutPage
andProductsPage
, are added.AboutPage
is set as theindex
route.Page not found
with a link to theAboutPage
.Acceptance Criteria for
1*
ProductPage
is added according to the design.ProductPage
with dynamic parameters:id
is added.getProduct
is implemented, using the product'sid
.The text was updated successfully, but these errors were encountered: