Basic Routing

After installing the dependencies, we can incorporate the library into our app. To ensure a comprehensive understanding of the steps involved, we present the theory alongside a practical example. This approach allows us to observe how the theory is applied in real-world scenarios, highlighting the necessity of each step.

Step 1: Enable routing functionality

To incorporate routing functionality into our application, we must wrap the root component with BrowserRouter.

Example: Let's open the index.js file and import the BrowserRouter component from the react-router-dom library:

Next, wrap the App component with the BrowserRouter (line 9-11):

Routing functionality is available in our application, allowing us to navigate between different pages based on the URL.

Step 2: Define routes

Now, we can specify the routes (paths) that our app will include. It is crucial to define these paths in advance as they determine the overall structure of the app. The React Router library offers Routes and Route components to simplify this implementation. We can use the following syntax to define the routes:

We wrap all the routes with the Routes component. Each Route is defined with the path prop, which specifies the URL configuration, and the element prop, which determines the component to render when a user navigates to that specific path.

Example: Let's start by opening the App.jsx file and importing the Routes and Route components from the react-router-dom library:

Next, within the return statement, we need to define the routes for our app. It's important to keep in mind that we have three views:

• The HomePage component represents the home page view.
• The AboutPage component represents the about page view.
• The ContactsPage component represents the contacts page view.

Here is the code to be included in the return statement of the App component:

Code explanation:

• Line 4, 8: <Routes>: This component is a container for defining routes in the application. It acts as a parent component for all the individual routes we define within it.
• Line 5: It represents a route definition. It specifies that when the URL path matches /, the component <HomePage /> should be rendered.
• Line 6: It defines another route. When the URL path matches /about, the component <AboutPage /> will be rendered.
• Line 7: It defines yet another route. When the URL path matches /contacts, the <ContactsPage /> component will be rendered.

Complete code

The code provided contains errors because we haven't imported the components necessary for rendering. In the next chapter, we will address this issue and demonstrate the correct syntax for importing components, which is different from what we typically use.