Day 16 of #100DaysOfCode — Routing in React

Routing in React apps is the process of navigating between different components or “pages” inside a Single Page Application (SPA), without causing a full browser reload. Since React doesn’t include routing out of the box, we rely on third-party libraries, and the most popular one by far is React Router.

In simpler terms:
👉 Routing lets you switch between pages in your React app without refreshing the page.
React apps technically run on just one HTML document, and routing “fakes” multiple pages by rendering different components based on the URL.

Today’s topic for my Day 15 of #100DaysOfCode is all about understanding how routing works in React using React Router.

---

What Is React Router?

React Router is the standard library used in React apps for handling routing. It gives you tools to:

• Define URLs
• Map those URLs to components
• Navigate between pages
• Fetch data before rendering
• Handle nested layouts
• Manage loading/error states

Modern React Router (especially v6.4+) offers two major approaches:

1. Component-Based Routing (Traditional / Declarative)

2. Data Routing (Modern Loaders + Actions System)

Let’s walk through both.

---

Component-Based Routing (Traditional React Router)

This is the routing approach most people learn first. You create route definitions using React components like <Routes> and <Route>.

🔑 Key Components & Concepts

BrowserRouter

Wraps your entire app and syncs the UI with the browser URL using the HTML5 History API.

Routes

A container that checks all child <Route> elements and renders the first match.

Route

Maps a URL path to a specific React component.

Link / NavLink

Used to navigate between pages without full page reloads.
NavLink also gives you easy access to styling the active link.

useParams

Lets you read dynamic URL segments like /users/:id.

Outlet

Used for nested routes—renders child routes where needed.

---

Installing React Router

npm install react-router-dom

---

Setting Up Basic Component-Based Routing

1. Wrap your App in BrowserRouter

import { BrowserRouter } from "react-router-dom";

root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

2. Create Routes (in App.jsx)

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

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

3. Add Navigation Links

import { Link } from "react-router-dom";

function Navigation() {
  return (
    <nav>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
      </ul>
    </nav>
  );
}

That's the classic component-based routing:
👉 Define routes → Render components → Navigate using Link.

---

⚡ Data Routing (React Router v6.4+)

Modern versions of React Router introduced data routing, which is more powerful and performance-focused.

With data routers, you can:

• Fetch data before the component renders (via loaders)
• Mutate data (actions)
• Handle pending states automatically
• Use an opinionated file-based routing pattern (optional)

Here’s an example:

import {
  createBrowserRouter,
  RouterProvider,
  useLoaderData,
} from "react-router-dom";

async function homeLoader() {
  return { user: "Alice" };
}

function Home() {
  const data = useLoaderData();
  return <h1>Welcome {data.user}</h1>;
}

const router = createBrowserRouter([
  {
    path: "/",
    element: <Home />,
    loader: homeLoader,
  },
  {
    path: "/about",
    element: <h1>About</h1>,
  },
]);

function App() {
  return <RouterProvider router={router} />;
}

Here, the loader runs before <Home /> renders, making data available instantly.

---

🎯 Component-Based vs Data Routing

Feature	Component Routing	Data Routing
Introduced	Early React Router	v6.4+
Data Fetching	Inside components	Loader functions
Ideal For	Simple apps, beginners	Scalable apps, async-heavy apps
URL → UI Mapping	Components	Route objects
Handles Loading States	Manual	Built-in

Both approaches are correct—just use what matches your project size and complexity.

---

Conclusion

Routing is essential as your React app grows. Whether you stick with traditional component-based routing or move into modern data routing, React Router handles nearly all routing needs in a React project.

Today’s deep dive really helped reinforce how SPAs handle navigation under the hood. Excited to keep pushing forward with #100DaysOfCode!

Happy coding!