The e-Business React application uses "react-router-dom" to manage its routing requirements. It utilizes the concepts of Private and Public routes. All pages that require access exclusively for authenticated (logged-in) users are categorized as Private routes, such as the Profile page. While pages accessible to both authenticated and guest (anonymous) users, are Public routes, like the Product Catalog page.
Routing configuration ensures smooth navigation within the application. This section details how to set up routing for both existing and new pages and is organized into the following sub-topics:
Using Routes
To navigate to different pages, you can use the following methods:
useNavigate
- This approach is useful for programmatically directing users to a specific page without requiring a click event. For instance, you can automatically navigate users to the Order Confirmation page once their payment has been successfully processed.
- Below is an example of how this can be accomplished.
Link
- This method is useful for directing users to a specific page upon a click event. For instance, it can be employed to take users to the 'View Cart' page when they click on the Cart icon in the header.
- Below is an example of how this can be accomplished.
Configuring new routes
After creating your new components, you should add an entry for their routes in the "/src/routes/index.jsx" file.
Follow the steps given below:
- Import the component as follows:
-
import {Component} from @DirectoryAlias;
- Component - exported Component name. For example, "Checkout".
- @DirectoryAlias - alias of the directory from where the component is being imported. For example, "@pages".
Refer to Alias paths in e-Business React for information on setting up custom alias paths.
-
- Determine the access level of the page - authenticated or anonymous
- If you require the page to be accessed only by authenticated users, then make an entry for its route under the "Private Routes" section as follows,
-
<Route element={<PrivateRoute />}><Route path="/pathname" element={<Component />} />....</Route>
- pathname - the text that gets appended to the base URL, typically, the page name. For example, "/checkout"
- Component - the name of the component to render. For example, "<Checkout />".
-
- For every other page that does not require mandatory authentication, make an entry for its route under the "Public Routes" section as follows,
-
<Route path="/pathname" element={<PublicRoute element={<Component />} />} />
-
Updating existing routes
To update any existing routes, look for the component's route in the "/src/routes/index.jsx" file. From this point, you can modify any existing configurations for the "path" and "element" properties. Access level can also be changed by redefining the routes as per the methods described in the above section.
When the URL reads "/", it triggers the rendering of a default Home Page. In the default implementation, a separate Home Page is not provided. The Login page serves as the default Home Page for anonymous browsing, while the Product Catalog is displayed for authenticated browsing.
The code has been written in the "/src/routes/PublicRoute.jsx", as follows, and can be modified as per your requirement.
Additionally, if you create a new Home Page, import it into the "/src/routes/index.jsx" file. An entry for the default Home Page is already present in this file and should be updated to reflect your new Home Page.
Notice that there is no "element" prop added for <PublicRoute />. To ensure your default Home Page renders whenever the URL points to "/", you should add your component within the element prop as shown below,
Nested Routes
For pages that require nested routing, consider the following example as a guide for configuring the routes:
The first "Route" is the parent page. Under this, add the other "Route" elements, which denote the children pages.
Dynamic Routes
Routes which have a dynamic value appended to them, like a specific product's ID, are useful when navigating from the Product Catalog page to the Product Details page. Dynamic Routes can be configured in the following format:
In the above example, ":id" represents the dynamic value that the Route expects to receive during runtime.
One of the ways in which the above value can be set is in the following format:
In the above example, "${product.id}" is used to append the dynamic value as expected by the configured Route.
Related Topics
- Creating a New Page in React Project
- Setting up the code for development and deployment
- Setting Up and Configuring the Redux Store in a React Application
Comments
Please sign in to leave a comment.