React / React Router үндэс

React Router үндэс

Одоо хэр бид нэг хуудаст апп хийсэн. Жинхэнэ вэбсайт олон хуудастай байдаг — нүүр хуудас, профайл хуудас, тохиргоо гэх мэт. React Router нь React аппд хэд хэдэн хуудас нэмэх стандарт хэрэгсэл. Суурилуулснаар аппаа бодит вэбсайт болгоно!

React Router суулгах

bash

npm install react-router-dom

React Router v6+ ашиглана — одоогийн хамгийн шинэ хувилбар.

Үндсэн concept-ууд

React Router-н гол concept-ууд:

BrowserRouter — router-н "хайрцаг", аппыг бүхэлд нь боодог
Routes — route-уудын жагсаалт
Route — нэг тодорхой URL path-ийг component-тэй холбодог
Link — хуудас солих холбоос (<a> тэмдэглэгээний оронд)
NavLink — идэвхтэй route-г автоматаар highlight хийдэг Link

jsx

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

// Хуудасны component-ууд
function Home() {
  return <h1>Нүүр хуудас</h1>;
}

function About() {
  return <h1>Бидний тухай</h1>;
}

function Contact() {
  return <h1>Холбоо барих</h1>;
}

export default function App() {
  return (
    <BrowserRouter>
      {/* Navigation */}
      <nav style={{ display: "flex", gap: "16px", padding: "16px" }}>
        <NavLink
          to="/"
          style={({ isActive }) => ({ color: isActive ? "blue" : "black" })}
        >
          Нүүр
        </NavLink>
        <NavLink
          to="/about"
          style={({ isActive }) => ({ color: isActive ? "blue" : "black" })}
        >
          Бидний тухай
        </NavLink>
        <NavLink
          to="/contact"
          style={({ isActive }) => ({ color: isActive ? "blue" : "black" })}
        >
          Холбоо барих
        </NavLink>
      </nav>

      {/* URL-г харж тохирох component-ийг харуулна */}
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </BrowserRouter>
  );
}

Layout route ба Outlet

Navbar, footer зэрэг хуудас дундаа хуваалцах хэсгүүдийг Layout route ашиглан нэг удаа л бичнэ:

jsx

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

// Layout component — Outlet нь child route-г харуулна
function Layout() {
  return (
    <div>
      <header style={{ background: "#1e293b", padding: "16px" }}>
        <nav style={{ display: "flex", gap: "16px" }}>
          <Link to="/" style={{ color: "white" }}>
            Нүүр
          </Link>
          <Link to="/courses" style={{ color: "white" }}>
            Сургалтууд
          </Link>
          <Link to="/profile" style={{ color: "white" }}>
            Профайл
          </Link>
        </nav>
      </header>

      <main style={{ padding: "24px" }}>
        {/* Child route-н component энд гарна */}
        <Outlet />
      </main>

      <footer
        style={{ background: "#f1f5f9", padding: "16px", textAlign: "center" }}
      >
        <p>© 2025 Миний апп</p>
      </footer>
    </div>
  );
}

function App() {
  return (
    <BrowserRouter>
      <Routes>
        {/* Layout нь parent route */}
        <Route path="/" element={<Layout />}>
          {/* index — "/" path-д харагдах component */}
          <Route index element={<Home />} />
          <Route path="courses" element={<Courses />} />
          <Route path="profile" element={<Profile />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

<Outlet /> нь child route-н component-ийг харуулдаг placeholder юм. Layout нэг удаа л бичигддэг, агуулга нь хуудас солигдох бүрт өөрчлөгдөнө.

404 хуудас нэмэх

Тохирох route олдохгүй үед харуулах хуудас:

jsx

function NotFound() {
  return (
    <div style={{ textAlign: "center", padding: "40px" }}>
      <h1>404</h1>
      <p>Хуудас олдсонгүй 😔</p>
      <Link to="/">Нүүр хуудас руу буцах</Link>
    </div>
  );
}

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />
          <Route path="courses" element={<Courses />} />
          {/* * нь бусад бүх path-г барина */}
          <Route path="*" element={<NotFound />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

useNavigate hook

Товч дарах, form submit хийх зэрэг үйлдлийн дараа программчлан хуудас солих:

jsx

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

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

  async function handleSubmit(e) {
    e.preventDefault();
    // нэвтрэх логик...
    const success = await login(email, password);
    if (success) {
      navigate("/dashboard"); // амжилттай бол dashboard руу явна
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      {/* ... */}
      <button type="submit">Нэвтрэх</button>
    </form>
  );
}

Дараагийн хичээлд:

Dynamic маршрут ба params сурна — URL-д өөрчлөгдөх хэсэг байх (/courses/:id гэх мэт) тохиолдолд хэрхэн ажиллахыг ойлгоно. useParams hook ашиглан URL-с өгөгдөл уншихыг эзэмшинэ.

← Өмнөх хичээлContext дэвшилтэт хэрэглээ Дараах хичээл →Dynamic маршрут ба params