Course Content
Expert React
Expert React
4. Formik
6. Next Steps
Challenge: Route Basic Concepts
Note
All challenges may appear broken by default since they contain whitespace sections where you need to input the necessary code. Once you correctly fill in these whitespace sections, the completed code will be displayed on the live page.
Task 1
Your task is to enhance the app by implementing routing and navigation functionality. The app has two main views: the home page (HomePage
component) and the products page (ProductsPage
component).
To complete this task, follow these steps:
- Wrap the root component (
App
) with theBrowserRouter
component to enable routing functionality. - Import the
HomePage
andProductsPage
components using thelazy
function from React, ensuring they are imported dynamically. - Inside the
App
component, use theSuspense
component to display a loading fallback while the views are being loaded. Utilize theLoader
component for this purpose. - Define the routes using the
Route
component within theRoutes
component, mapping each route path to the corresponding component.- Set the
/
path to lead to the HomePage` component. - Set the
/products
path to lead to theProductsPage
component.
- Set the
- In the
NavBar
component, create links to the corresponding routes using theLink
orNavLink
components.
Ensure that your implementation allows users to navigate between the home and products pages seamlessly. Test the app thoroughly to verify the navigation and functionality.
Everything was clear?