Chapter 12React Tutorial~1 min read

React Router

Routing — Multiple Pages बनवणे

React Router ही React applications साठी standard routing library आहे. Single Page Application (SPA) मध्ये URL नुसार वेगवेगळे components दाखवायला वापरतात. Page reload न होता navigation होतो.

Install करणे

bash

npm install react-router

Basic Setup

Routes configure करणे

jsx

// main.jsx — entry point
import { createRoot } from 'react-dom/client';
import { RouterProvider } from 'react-router';
import { router } from './app';

createRoot(document.getElementById('root')).render(
  <RouterProvider router={router} />
);

// app.jsx — routes define करणे
import { createBrowserRouter } from 'react-router';
import Home from './pages/Home';
import About from './pages/About';
import Contact from './pages/Contact';
import NotFound from './pages/NotFound';

export const router = createBrowserRouter([
  { path: "/",        element: <Home /> },
  { path: "/about",   element: <About /> },
  { path: "/contact", element: <Contact /> },
  { path: "*",        element: <NotFound /> },  // 404
]);

Link — Navigation

Link आणि NavLink

jsx

import { Link, NavLink, useNavigate } from 'react-router';

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

  return (
    <nav>
      {/* Link — page reload नाही */}
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>

      {/* NavLink — active state automatically */}
      <NavLink
        to="/contact"
        className={({ isActive }) =>
          isActive ? "text-blue-500 font-bold" : "text-gray-600"
        }
      >
        Contact
      </NavLink>

      {/* Programmatic navigation */}
      <button onClick={() => navigate('/about')}>
        Go to About
      </button>
    </nav>
  );
}

Layout Routes — Shared UI

Outlet — nested routes साठी

jsx

import { Outlet, Link } from 'react-router';

// Layout component — Navbar + Footer सगळ्या pages वर
function Layout() {
  return (
    <>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
        <Link to="/tutorials">Tutorials</Link>
      </nav>

      <main>
        <Outlet />  {/* Child route येथे render होतो */}
      </main>

      <footer>
        <p>© 2025 Tech Tatya</p>
      </footer>
    </>
  );
}

// Router config — Layout च्या आत routes
export const router = createBrowserRouter([
  {
    path: "/",
    element: <Layout />,
    children: [
      { index: true,       element: <Home /> },
      { path: "about",     element: <About /> },
      { path: "tutorials", element: <Tutorials /> },
    ],
  },
]);

Dynamic Routes — useParams

/tutorial/:id — dynamic segment

jsx

import { useParams } from 'react-router';

// Route: { path: "tutorial/:id", element: <TutorialPage /> }

function TutorialPage() {
  const { id } = useParams();  // URL मधून :id extract करतो

  return (
    <div>
      <h1>Tutorial: {id}</h1>
      {/* id वापरून API call करा */}
    </div>
  );
}

// /tutorial/react    → id = "react"
// /tutorial/python   → id = "python"
// /tutorial/html     → id = "html"

✅ Key Points — लक्षात ठेवा

▸createBrowserRouter — routes define करतो
▸<RouterProvider router={router} /> — app wrap करतो
▸<Link to="/path"> — page reload न होता navigate
▸<Outlet /> — nested/child route येथे render होतो
▸useParams() — URL dynamic segments extract करतो

0/12 chapters पूर्ण

मागे — Previous

Context API

अभिनंदन! 🎉

Tutorial Complete!