6. Next Steps
Challenge: Route Basic Concepts
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.
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 (
To complete this task, follow these steps:
- Wrap the root component (
App) with the
BrowserRoutercomponent to enable routing functionality.
- Import the
ProductsPagecomponents using the
lazyfunction from React, ensuring they are imported dynamically.
- Inside the
Appcomponent, use the
Suspensecomponent to display a loading fallback while the views are being loaded. Utilize the
Loadercomponent for this purpose.
- Define the routes using the
Routecomponent within the
Routescomponent, mapping each route path to the corresponding component.
- Set the
/path to lead to the HomePage` component.
- Set the
/productspath to lead to the
- Set the
- In the
NavBarcomponent, create links to the corresponding routes using the
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.
index.jsfile, import the
BrowserRoutercomponent from the React Router library and use it to wrap the root component, enabling routing functionality.
2. To implement lazy-loading, import the
lazyfunction from the React library.
3. Import the
Suspensecomponent from the React library to add a fallback to the app. Set the
fallbackprop to a value that will be shown while any view is loading.
4. Use the
Routescomponents from the React Router library to specify routes for the app.
5. When setting a path, use the
pathprop in the
Routecomponent. Make sure all
Routecomponents are wrapped with the
6. To create navigation between pages, utilize the
NavLinkcomponents from the React Router library. Set the
toprop with the corresponding path values.
Everything was clear?