React Router là gì? Điều hướng trong React cho người mới

Khi mới học React, bạn dựng được vài component đẹp, nhưng tới lúc cần nhiều trang (Trang chủ, Giới thiệu, Chi tiết sản phẩm) thì lúng túng: "Làm sao để bấm vào link mà chuyển trang, mà không reload cả website?". Câu trả lời gần như luôn là React Router. Bài này giải thích routing trong React là gì, vì sao cần, và cách dùng cơ bản kèm code đúng cú pháp bản mới nhất.

Routing trong SPA là gì và vì sao cần

Một website truyền thống có nhiều file HTML: bấm link là trình duyệt tải lại cả trang từ server. React thì khác. App React thường là SPA (Single Page Application): chỉ có một file HTML, mọi giao diện do JavaScript vẽ ra. Trình duyệt không bao giờ "đi lấy trang mới".

Vấn đề nảy sinh: nếu chỉ có một trang, làm sao có URL riêng cho /products, /about, hay /products/42? Người dùng cần:

• Bấm link để chuyển "trang" mà không reload (giữ tốc độ và state).
• Bấm nút Back/Forward của trình duyệt vẫn đúng.
• Copy URL gửi cho người khác, mở ra đúng nội dung đó.

Routing chính là cơ chế gắn mỗi URL với một giao diện cụ thể. React không có sẵn tính năng này, nên ta cần một thư viện routing. Phổ biến nhất, gần như là mặc định, là React Router.

React Router là gì

React Router là thư viện điều hướng (routing) cho React: nó đọc URL hiện tại và quyết định render component nào, đồng thời cho phép chuyển trang mà không reload. Đây là thư viện routing lâu đời và phổ biến nhất trong hệ sinh thái React, bản hiện tại là v7 (phiên bản mới nhất 7.17.0 tại thời điểm viết).

Một điểm dễ gây nhầm cho người mới: từ v7, package gộp lại chỉ còn react-router (không còn react-router-dom như các bài hướng dẫn cũ). Mọi thứ import thẳng từ "react-router".

React Router có thể dùng ở 3 chế độ (mode), từ nhẹ tới đầy đủ:

• Declarative mode: dùng routing tối giản bằng component (<Routes>, <Route>, <Link>). Hợp khi bạn tự lo phần fetch dữ liệu.
• Data mode: thêm loader và action để load dữ liệu trước khi render, có pending UI và error boundary.
• Framework mode: bản đầy đủ nhất, có Vite plugin, type-safe, code splitting, SSR/SSG. Đây là hậu thân của Remix, và là lựa chọn nếu bạn đang cân nhắc một framework full như Next.js là gì.

Người mới nên bắt đầu từ declarative mode cho dễ nắm ý tưởng, rồi nâng dần. Phần dưới đi theo hướng đó.

Cài đặt và cấu hình cơ bản

Cài thư viện:

npm i react-router

Bọc toàn bộ app trong <BrowserRouter> (thường ở file main.jsx):

import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router";
import App from "./App";

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

Sau đó khai báo các "trang" bằng <Routes> và <Route>. Mỗi Route gắn một đường dẫn (path) với một component (element):

import { Routes, Route } from "react-router";

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

Vào / thì thấy Home, vào /about thì thấy About. Đơn giản vậy thôi.

Link: chuyển trang không reload

Để người dùng chuyển trang, không dùng thẻ <a href> (nó reload cả trang, mất hết state và làm mất cái hay của SPA). Hãy dùng <Link>:

import { Link } from "react-router";

function Menu() {
  return (
    <nav>
      <Link to="/">Trang chủ</Link>
      <Link to="/about">Giới thiệu</Link>
      <Link to="/products">Sản phẩm</Link>
    </nav>
  );
}

Nếu cần highlight link đang active (ví dụ menu đang ở trang nào tô đậm trang đó), dùng <NavLink>:

import { NavLink } from "react-router";

<NavLink
  to="/products"
  className={({ isActive }) => (isActive ? "active" : "")}
>
  Sản phẩm
</NavLink>

NavLink tự truyền isActive để bạn đổi class hoặc style theo trạng thái.

useNavigate: điều hướng bằng code

Đôi khi bạn cần chuyển trang không phải do người dùng bấm link, mà do logic, ví dụ sau khi đăng nhập thành công thì nhảy vào dashboard. Đó là việc của hook useNavigate:

import { useNavigate } from "react-router";

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

  async function handleSubmit() {
    await login();
    navigate("/dashboard"); // chuyển trang sau khi xong
  }

  return <button onClick={handleSubmit}>Đăng nhập</button>;
}

navigate(-1) để quay lại trang trước (giống nút Back). Lưu ý: với điều hướng do người dùng chủ động bấm, vẫn nên ưu tiên <Link> vì nó tốt hơn cho accessibility và mở tab mới.

useParams: đọc tham số động trên URL

Trang chi tiết sản phẩm cần một URL kiểu /products/42, trong đó 42 thay đổi theo từng sản phẩm. Khai báo phần động bằng dấu hai chấm (:id):

<Route path="products/:id" element={<ProductDetail />} />

Trong component, đọc giá trị đó bằng hook useParams:

import { useParams } from "react-router";

function ProductDetail() {
  const { id } = useParams();
  // id = "42" khi vào /products/42
  return <h1>Sản phẩm số {id}</h1>;
}

Đây là cách bạn dựng một template dùng chung cho hàng nghìn sản phẩm mà chỉ viết một component.

Nested routes: route lồng nhau

Trong app thật, nhiều trang dùng chung một layout: cùng header, sidebar, footer, chỉ phần giữa đổi. React Router giải quyết bằng nested routes (route lồng nhau). Route cha bọc các route con, và chỗ nào cần render con thì đặt <Outlet />:

import { Outlet } from "react-router";

// Route cha
<Routes>
  <Route path="dashboard" element={<DashboardLayout />}>
    <Route index element={<Overview />} />
    <Route path="settings" element={<Settings />} />
  </Route>
</Routes>;

// Component layout cha
function DashboardLayout() {
  return (
    <div>
      <Sidebar />
      <Outlet /> {/* render Overview hoặc Settings ở đây */}
    </div>
  );
}

Kết quả: /dashboard hiện Overview, /dashboard/settings hiện Settings, cả hai đều dùng chung Sidebar. Route index là route mặc định khi vào đúng đường dẫn cha. Sidebar không bị vẽ lại khi đổi qua lại giữa con, đây là điểm mạnh lớn của nested routes.

Loader và data mode (nhắc ngắn)

Ở mức cao hơn, React Router có thể load dữ liệu trước khi render thay vì fetch trong useEffect. Bạn khai báo router bằng createBrowserRouter và gắn loader cho từng route:

import { createBrowserRouter, RouterProvider, useLoaderData } from "react-router";

const router = createBrowserRouter([
  {
    path: "/products/:id",
    loader: async ({ params }) => {
      return { product: await getProduct(params.id) };
    },
    Component: ProductDetail,
  },
]);

function ProductDetail() {
  const { product } = useLoaderData();
  return <h1>{product.name}</h1>;
}

Cách này giúp dữ liệu sẵn sàng ngay khi component mount, tránh cảnh "màn hình loading nhấp nháy". Người mới chưa cần dùng ngay, nhưng nên biết nó tồn tại để dùng khi app lớn lên.

Lỗi thường gặp khi mới dùng React Router

• Quên bọc <BrowserRouter>: gọi useNavigate/useParams sẽ báo lỗi kiểu "useNavigate() may be used only in the context of a Router". Nhớ bọc app ở gốc.
• Dùng <a href> thay vì <Link>: trang reload, mất state, mất tốc độ SPA. Trong app React luôn dùng <Link> cho điều hướng nội bộ.
• Quên <Outlet /> trong layout cha: route con khai báo đúng nhưng "không hiện gì". Thiếu Outlet thì cha không biết render con ở đâu.
• Import sai package: v7 dùng react-router, nhiều tutorial cũ vẫn ghi react-router-dom. Trộn lẫn dễ gây lỗi khó hiểu.
• Nhầm path tương đối và tuyệt đối: to="/about" đi từ gốc, còn to="about" đi tương đối theo route hiện tại. Trong nested routes, chọn sai kiểu sẽ ra URL không như ý.

Tóm lại

Routing là phần không thể thiếu khi app React vượt khỏi một trang duy nhất. React Router cho bạn gắn mỗi URL với một giao diện, chuyển trang không reload, và xử lý gọn các nhu cầu thật như trang chi tiết động hay layout dùng chung. Chỉ cần nắm vững Route, Link, useNavigate, useParams và nested routes là bạn đã dựng được phần lớn cấu trúc điều hướng của một app thực tế.

Routing thường là kỹ năng học ngay sau khi bạn đã quen React cơ bản và React Hooks. Nếu bạn còn đang phân vân nền tảng, đọc trước React là gì để chắc gốc, rồi quay lại bài này áp dụng.

### Học React bài bản, đi từ cơ bản đến sản phẩm đi làm đượcRouting chỉ là một mảnh trong bức tranh lớn. Trong khóa React PRO của HoleTex, bạn học React Router cùng state management, gọi API, TypeScript và dựng dự án thật từ đầu tới deploy, theo lộ trình có cấu trúc thay vì ghép nhặt từ trăm video rời rạc.

Bài liên quan

• React là gì?
• React Hooks là gì? useState và useEffect
• Quản lý state trong React
• React vs Next.js: khác nhau ở đâu, học cái nào trước?
• Lộ trình học ReactJS từ con số 0 đến đi làm

Nguồn tham khảo: reactrouter.com, Picking a Mode, Declarative Routing, Navigating, Data Loading (đối chiếu 2026-06-04, React Router v7).