Now that we've wrapped our app with BrowserRouter to enable routing, the next step is to specify the routes (paths) our app will include. These routes determine the overall structure of the app and control what content is displayed based on the URL.

React Router provides two essential components for defining routes: Routes and Route. The Routes component acts as a container for all route definitions, while the Route component represents a specific route configuration.

Here's the syntax for defining routes:

<Routes>
  <Route path="<path_value>" element={<component_to_render>} />
  <Route path="<path_value>" element={<component_to_render>} />
  <Route path="<path_value>" element={<component_to_render>} />
</Routes>

In this structure:

• <path_value>: Specifies the URL configuration for the route;
• <component_to_render>: Determines the component to render when a user navigates to that specific path.

Example

Let's apply this concept to our project. Open the App.jsx file and import the Routes and Route components from the react-router-dom library:

import { Routes, Route } from "react-router-dom";

Within the return statement of the App component, define the routes for our app:

const App = () => {
  return (
    <>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/about" element={<AboutPage />} />
        <Route path="/contacts" element={<ContactsPage />} />
      </Routes>
    </>
  );
};

Code explanation:

• Line 4, 8: <Routes>: This component serves as a container for defining routes in the application, acting as a parent component for individual route definitions;
• Line 5: <Route>: Represents a route definition. It specifies that when the URL path matches /, the component <HomePage /> should be rendered;
• Line 6: <Route>: Defines another route. When the URL path matches /about, the component <AboutPage /> will be rendered;
• Line 7: <Route>: Defines another route. When the URL path matches /contacts, the <ContactsPage /> component will be rendered.