🧭 React Router Crash Course (Beginner Friendly)

Learn what routing is, why it matters in React, and how to set it up step-by-step — with a mini React demo project.

🧐 What Is Routing in React?

So, what the heck is routing?

In simple terms, routing controls what your app shows when a user navigates to different pages.

That’s it! When you click on something like “About” or “Contact,” routing decides which component gets displayed on the screen.

---

🌐 How Traditional Routing Works

Before SPAs (Single Page Applications), websites used normal HTML navigation with the <a> tag:

<a href="/about">Go to About Page</a>

Every time you clicked on that link, the browser reloaded the page from scratch. That means your app reset, and the DOM (Document Object Model) re-rendered completely — not very efficient!

---

⚛️ React: The Power of Single Page Applications (SPA)

React builds Single Page Applications, where everything runs inside one main HTML file: index.html.

When navigation happens, React simply replaces parts of the UI dynamically, rather than reloading the entire page.

But to make that navigation magic happen, React needs help — that’s where react-router-dom comes in.

---

📦 Installing React Router

React itself doesn’t handle routing, so you’ll need to install a library for it. The most popular one is react-router-dom.

Use your package manager of choice:

npm install react-router-dom

Or:

pnpm add react-router-dom

---

🏗️ Step 1: Setup BrowserRouter

After installing, wrap your whole app with BrowserRouter.

This enables React Router throughout your application.

// main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import { BrowserRouter } from 'react-router-dom'
import App from './App.jsx'

ReactDOM.createRoot(document.getElementById('root')).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
)

That’s your basic setup! Without this step, your app won’t understand routes.

---

🗺️ Step 2: Define Routes with <Routes> and <Route>

Now it’s time to tell React what to show on each URL path.

// App.jsx
import { Routes, Route } from 'react-router-dom'
import Home from './pages/Home'
import About from './pages/About'
import Contact from './pages/Contact'
import NotFound from './pages/NotFound'

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
      <Route path="/contact" element={<Contact />} />
      {/* Catch all unknown routes */}
      <Route path="*" element={<NotFound />} />
    </Routes>
  )
}

export default App

• / → Home Page
• /about → About Page
• /contact → Contact Page
• * → Not Found / 404 Page

---

🔗 Step 3: Create Navigation with Link and NavLink

Instead of using normal <a> tags, React gives us special components: Link and NavLink.

These navigate between pages without reloading the app.

// Navbar.jsx
import { Link, NavLink } from 'react-router-dom'

function Navbar() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
      <NavLink
        to="/contact"
        className={({ isActive }) => (isActive ? 'active' : '')}
      >
        Contact
      </NavLink>
    </nav>
  )
}

export default Navbar

✅ Link: Basic navigation (no reload).

✅ NavLink: Same as Link, but automatically adds an “active” class to the current route — perfect for styling active menu items.

---

🧩 Step 4: Nested Routes and <Outlet />

Sometimes you’ll want routes inside routes, like for a dashboard that contains multiple sections (e.g., profile, settings).

That’s where nested routes come in — and the <Outlet /> component helps render them in the right place.

// App.jsx
<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/dashboard" element={<Dashboard />}>
    <Route path="profile" element={<Profile />} />
    <Route path="settings" element={<Settings />} />
  </Route>
</Routes>

Inside Dashboard.jsx:

// Dashboard.jsx
import { Outlet } from 'react-router-dom'

function Dashboard() {
  return (
    <div>
      <h2>Dashboard</h2>
      {/* Child routes will render here */}
      <Outlet />
    </div>
  )
}

export default Dashboard

Now, when visiting /dashboard/profile, React automatically renders the Profile component inside the Dashboard layout!

---

🚀 Mini React Demo Project: "My First Routed App"

Let’s put it all together into a working mini project.

File Structure:

src/
  ├── main.jsx
  ├── App.jsx
  ├── components/
  │     └── Navbar.jsx
  ├── pages/
  │     ├── Home.jsx
  │     ├── About.jsx
  │     ├── Contact.jsx
  │     └── NotFound.jsx

Example Pages:

// pages/Home.jsx
function Home() {
  return <h1>Welcome to My React App!</h1>
}
export default Home

// pages/About.jsx
function About() {
  return <h1>About This Project</h1>
}
export default About

// pages/Contact.jsx
function Contact() {
  return <h1>Contact Me Anytime!</h1>
}
export default Contact

// pages/NotFound.jsx
function NotFound() {
  return <h1>404 — Page Not Found</h1>
}
export default NotFound

Add the Navbar:

// App.jsx
import Navbar from './components/Navbar'

function App() {
  return (
    <>
      <Navbar />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </>
  )
}

Now you’ve got a complete, simple React app with modern routing — no page reloads, smooth navigation, and clean URLs.

---

⚙️ Bonus: Things to Explore Next

• React Router Docs — Learn about advanced features like useNavigate, loaders, lazy loading, and route transitions.
• Try adding a 404 redirect or a Protected Route for authenticated sections.
• Use NavLink styling to highlight the active page.

---

🏁 Wrapping Up

You just learned how to set up React Router from scratch — including how to install it, define routes, use navigation components, and manage nested routes cleanly.

Now, whenever you start a new React project, you’ll know exactly how to make it multi-page while keeping it fast and smooth.

Keep building! 💪

---