Route to Components: URL Mapping in React

1. Creating Your Page Components

Before we can define routes, we need the components that will act as our pages. It's a common convention to organize these in a dedicated src/pages directory to keep your project structure clean.

Let's create three simple page components and a "not found" page.

HomePage:

// src/pages/HomePage.jsx
import React from 'react';

const HomePage = () => {
  return <h1>Home Page</h1>;
};

export default HomePage;

AboutPage:

// src/pages/AboutPage.jsx
import React from 'react';

const AboutPage = () => {
  return <h1>About Us</h1>;
};

export default AboutPage;

ProductsPage:

// src/pages/ProductsPage.jsx
import React from 'react';

const ProductsPage = () => {
  return <h1>Our Products</h1>;
};

export default ProductsPage;

NotFoundPage:

// src/pages/NotFoundPage.jsx
import React from 'react';

const NotFoundPage = () => {
  return <h1>404 - Page Not Found</h1>;
};

export default NotFoundPage;

Now we have the destinations for our routes.

2. Mapping Paths to Components

With our page components ready, we can now map URL paths to them in App.jsx. We'll use the <Routes> and <Route> components from react-router-dom.

• <Routes>: This component acts as a container for all your individual routes. It intelligently examines the current URL and renders the best matching <Route>.
• <Route>: This is where the mapping happens. It takes two essential props:
  • path: A string that defines the URL path to match (e.g., "/", "/about").
  • element: The React component to render when the path matches (e.g., <HomePage />).

The following video provides an excellent walkthrough of this entire process. It shows how to import the necessary components and build out the routing structure.

As the video demonstrates, defining your routes is a declarative process. You are describing what the UI should look like for a given URL.

3. Understanding the Route Components

To solidify what you saw in the video, let's look at a textual explanation of the core components.

A key takeaway from modern React Router (version 6) is that the <Routes> component is intelligent. It analyzes all its child <Route>s and picks the most specific match. This means you don't have to worry about ordering your routes, unlike in some older routing systems. A path like /products is considered more specific than /products/:id, which is more specific than *.

4. Putting It All Together

Let's update your App.jsx file to include all the routes we've discussed. Make sure you import the page components you created earlier.

// src/App.jsx
import React from 'react';
import { Routes, Route } from 'react-router-dom';

// Import your page components
import HomePage from './pages/HomePage';
import AboutPage from './pages/AboutPage';
import ProductsPage from './pages/ProductsPage';
import NotFoundPage from './pages/NotFoundPage';

function App() {
  return (
    <div>
      {/* You could have a Navbar component here, we'll build that next! */}
      <main>
        <Routes>
          <Route path="/" element={<HomePage />} />
          <Route path="/about" element={<AboutPage />} />
          <Route path="/products" element={<ProductsPage />} />

          {/* This 'catch-all' route must be the last one if you were using older versions, 
              but in v6 the router is smart enough to pick the best match regardless of order. 
              It will only match if no other routes above do. */}
          <Route path="*" element={<NotFoundPage />} />
        </Routes>
      </main>
      {/* You could have a Footer component here */}
    </div>
  );
}

export default App;

After setting this up, run your development server. You should now be able to manually navigate to http://localhost:5173/, http://localhost:5173/about, and http://localhost:5173/products in your browser and see the corresponding components render. If you try a URL that doesn't exist, like http://localhost:5173/contact, you will see the NotFoundPage component.

Conclusion

You have now successfully created the navigation blueprint for your application. This is a crucial skill for building any SPA.

Key Takeaways:

• Application routes are defined inside the <Routes> component.
• Each route is a <Route> component that maps a URL path to a React element.
• A "catch-all" route with path="*" is used to handle invalid URLs and display a "404 Not Found" page.
• In React Router v6, the router intelligently ranks routes by specificity, so you don't need to worry about the order of your <Route> definitions.

Preview of the Next Lesson:
Our pages are now accessible via their URLs, but users need a way to navigate between them without manually typing into the address bar. In the next lesson, we will learn how to create clickable navigation elements using the <Link> and <NavLink> components from React Router.