🚀 React-Router Crash Course

When building single-page applications (SPAs) with React, you need a way to move between different "pages" without refreshing the browser. That’s where React Router comes in.

It allows you to:

• Create multiple routes (pages)

• Navigate between them smoothly

• Manage layouts and nested routes

• Handle URL parameters and query strings

In this blog, we’ll learn the fundamentals of React Router step by step.

---

🛠️ Installing React Router

First, install React Router in your project:

npm install react-router-dom

📌 Basic Example: Simple Routes

Let’s start with a basic app that has two pages: Home and About.

import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";

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

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

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

✅ Here we use Link for navigation (instead of <a> tag) so the page doesn’t reload.

---

🗂️ Layouts and <Outlet>

Many apps share the same header/footer across multiple pages. React Router provides <Outlet> for layouts.

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

function Layout() {
  return (
    <div>
      <header>
        <nav>
          <Link to="/">Home</Link> | <Link to="/about">About</Link>
        </nav>
      </header>
      <main>
        <Outlet />
      </main>
      <footer>© 2025 My App</footer>
    </div>
  );
}

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

📌 index means the default route inside Layout.

---

🎯 URL Parameters

You can pass dynamic values via URLs (like /users/1).

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

function User() {
  const { id } = useParams();
  return <h1>User Profile - ID: {id}</h1>;
}

// Route
<Route path="users/:id" element={<User />} />

---

🔄 Navigation Flow Diagram

Here’s how navigation works in React Router:

[ Browser URL ] → [ Router ] → [ Routes ] → [ Outlet/Layout ] → [ Component Render ]

---

⚡ TanStack Router – A Modern Alternative

While React Router is popular, TanStack Router is gaining traction for robust routing:

• Strong TypeScript support

• Data loading and caching built-in

• Declarative route definitions

Example (TanStack Router):

import { Router, Route, RootRoute } from "@tanstack/react-router";

const rootRoute = new RootRoute();
const indexRoute = new Route({ getParentRoute: () => rootRoute, path: "/", component: Home });
const aboutRoute = new Route({ getParentRoute: () => rootRoute, path: "/about", component: About });

const routeTree = rootRoute.addChildren([indexRoute, aboutRoute]);
const router = new Router({ routeTree });

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

📌 More verbose than React Router, but highly scalable for enterprise apps.

---

✅ Conclusion

• Use React Router for most beginner-to-intermediate React apps.

• Learn about Layouts, Outlets, and Params for real-world projects.

• Explore TanStack Router if you need advanced routing with type-safety and data-loading.

👉 Routing is the backbone of SPAs — master it, and you can build professional React apps.