React Creating Routes

In the last lesson, React Installing React Router, you turned routing on but nothing shows yet. This lesson is where you create routes, the rules that tell React Router which component to show for which URL.

🤔 What is a route?

Let’s define the word first, because everything here is built on it.

• A route is a rule that says “when the URL is this path, show this component”.
• For example: when the path is /about, show the About component.
• You define a set of these rules, one per page, and React Router picks the matching one.

🧩 The two components: Routes and Route

React Router gives you two components that work together to define routes.

• Routes is the container. It holds all your route rules and shows the one that matches.
• Route is a single rule inside it, with a path and an element (the component to show).

Here’s the smallest example, with a home page and an about page.

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

function Home() {
  return <h1>Home Page</h1>;
}

function About() {
  return <h1>About Page</h1>;
}

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
    </Routes>
  );
}

Read each part carefully.

• Routes wraps all the rules. Only one of its Route children shows at a time.
• The first Route says: when the path is /, show <Home />.
• The second says: when the path is /about, show <About />.
• The element takes the component as JSX, like element={<Home />}, with the angle brackets.

(visit / )       -> Home Page
(visit /about )  -> About Page

🔍 How matching works

React Router looks at the current URL and finds the one matching Route.

• It compares the URL to each Route’s path.
• The matching Route’s element is the component that renders.
• Only one route shows at a time, so the page is whichever matched.
• If nothing matches, nothing renders there (you’ll add a catch-all 404 page in a later lesson).

So Routes is like a single-choice switch: it shows the one route that fits and ignores the rest.

🖥️ Adding a shared layout around routes

Usually you want some things on every page, like a navigation bar. You put those outside Routes, and only the changing part inside.

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

function App() {
  return (
    <div>
      <header>My Site</header> {/* shows on every page */}

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>

      <footer>© 2025</footer> {/* shows on every page */}
    </div>
  );
}

See how the layout and the routes split up.

• The header and footer are outside Routes, so they show on every page.
• Only the part inside Routes changes when the URL changes.
• So the nav bar stays put while the middle swaps between Home, About, and Contact.

🧠 The element prop takes JSX, not a name

A small but important detail: the element prop wants the component written as JSX, with angle brackets, not just the function name.

// ❌ passing the function itself - this is wrong
<Route path="/about" element={About} />

// ✅ passing it as JSX with angle brackets
<Route path="/about" element={<About />} />

Here’s the why, kept short.

• element expects an actual element, which is what <About /> is.
• About on its own is just the function, not an element, so React Router can’t render it.
• So always write element={<About />}, with the brackets.

⚠️ Common Mistakes

Besides the missing brackets, people forget to put their Routes inside a Routes container.

// ❌ Route without a Routes wrapper - this won't work
<Route path="/" element={<Home />} />

// ✅ Routes wraps all the Route rules
<Routes>
  <Route path="/" element={<Home />} />
</Routes>

Keep these in mind.

• Don’t write Route without a Routes parent. The rules must live inside Routes.
• Don’t forget the angle brackets in element={<Home />}.
• Don’t put things you want on every page inside Routes. Those go outside it.

✅ Best Practices

A few habits for clean routes.

• Keep all your routes together in one Routes block, usually in App, so they’re easy to find.
• Put shared layout like the nav bar and footer outside Routes.
• Use clear paths that match the page, like /about for the About page.
• Write each element as JSX with angle brackets: element={<Page />}.

🧩 What You’ve Learned

• ✅ A route is a rule that maps a URL path to a component to show
• ✅ Routes is the container, and each Route inside has a path and an element
• ✅ React Router shows the one Route whose path matches the current URL
• ✅ Only one route renders at a time, so the page is whichever matched
• ✅ Put shared layout (nav, footer) outside Routes; put changing pages inside it
• ✅ element takes JSX with angle brackets, like element={<About />}, not just the name

🚀 What’s Next?

Now you can map URLs to pages. But many pages aren’t fixed, like a profile page that changes per user. Next you’ll learn route parameters, so one route can handle URLs like /users/1 and /users/2.

React Route Parameters