Setting Up Routes and Nested Routes

🧭 What Is Routing in React?

Routing in React allows you to build Single Page Applications (SPAs) where different components are displayed based on the URL — without reloading the page. Using React Router, you can define routes, nested routes, protected routes, and more to navigate through your app smoothly. 🌐

⚙️ Installing React Router

To get started, install react-router-dom:

npm install react-router-dom

Or with yarn:

yarn add react-router-dom

📍 Basic Route Setup

Here’s how to set up basic routing:

// App.js
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import Contact from './pages/Contact';

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

🔗 Adding Navigation

You can navigate between routes using the <Link /> component:

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

function Navbar() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
      <Link to="/contact">Contact</Link>
    </nav>
  );
}

🧩 Setting Up Nested Routes

Nested routes allow you to render child routes within a parent layout component.

// Dashboard.js
import { Outlet, Link } from 'react-router-dom';

function Dashboard() {
  return (
    <div>
      <h2>Dashboard</h2>
      <nav>
        <Link to="profile">Profile</Link>
        <Link to="settings">Settings</Link>
      </nav>
      <Outlet />  {/* Nested route content renders here */}
    </div>
  );
}

// App.js (updated)
import Dashboard from './pages/Dashboard';
import Profile from './pages/Profile';
import Settings from './pages/Settings';

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

🧭 Using useNavigate for Programmatic Navigation

import { useNavigate } from 'react-router-dom';

function Login() {
  const navigate = useNavigate();

  const handleLogin = () => {
    // After successful login
    navigate('/dashboard');
  };

  return <button onClick={handleLogin}>Login</button>;
}

⚠️ Handling 404 Pages

You can use a wildcard route for unmatched URLs:

<Route path="*" element={<NotFound />} />

🔒 Protecting Routes (Private Routes)

To restrict access to certain routes, use a wrapper component:

// PrivateRoute.js
import { Navigate } from 'react-router-dom';

function PrivateRoute({ isAuth, children }) {
  return isAuth ? children : <Navigate to="/login" />;
}

// App.js
<Route path="/dashboard" element={
  <PrivateRoute isAuth={userIsLoggedIn}>
    <Dashboard />
  </PrivateRoute>
} />

📦 Summary

• ✅ Use BrowserRouter to wrap your routes
• ✅ Define each path using Route and element
• ✅ Use Link for client-side navigation
• ✅ Add nested routes with Outlet
• ✅ Use useNavigate for redirects
• ✅ Protect sensitive pages using custom route guards

🚀 Final Thoughts

Setting up routes and nested routes in React is essential for building clean, scalable SPAs. With react-router-dom, you can easily manage navigation, layouts, private routes, and even nested hierarchies — giving your app a professional, intuitive structure. 🗺️⚛️

---