React Router: Hướng dẫn điều hướng trong ứng dụng React

React Router là gì?

Khi bạn xây dựng ứng dụng với React, bạn đang tạo ra một Single Page Application (SPA) — tức là toàn bộ app chỉ có một file HTML duy nhất. Vấn đề là: làm sao để người dùng điều hướng giữa các "trang" như /home, /about, /profile mà không làm tải lại trang?

Đó chính xác là việc React Router làm. React Router là thư viện phổ biến nhất để xử lý điều hướng (routing) trong ứng dụng React, cho phép bạn ánh xạ URL với các component khác nhau mà không cần reload trang.

Phiên bản hiện tại là React Router v6 (react-router-dom v6) — có cú pháp hơi khác v5, bài viết này dùng v6.

Nếu bạn chưa biết React là gì, hãy đọc React là gì? trước khi tiếp tục.

Cài đặt React Router DOM

Trong project React của bạn, chạy lệnh:

npm install react-router-dom

Lưu ý: dùng react-router-dom (không phải react-router) cho ứng dụng web. react-router-dom là phiên bản dành riêng cho browser.

Tạo Routes cơ bản

Bước 1 — Bọc App trong BrowserRouter

Mở file main.jsx (hoặc index.jsx) và bọc component App trong BrowserRouter:

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

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

BrowserRouter cung cấp context routing cho toàn bộ app. Bạn chỉ cần đặt nó một lần ở cấp cao nhất.

Bước 2 — Khai báo Routes

Trong App.jsx, import các component cần thiết và khai báo routes:

// App.jsx
import { Routes, Route, Link } 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 (
    <div>
      <nav>
        <Link to="/">Trang chủ</Link>
        <Link to="/about">Giới thiệu</Link>
        <Link to="/contact">Liên hệ</Link>
      </nav>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </div>
  )
}

export default App

path="*" là route "catch-all" cho trang 404 — hiển thị khi không có route nào khớp.

Điều hướng với Link và NavLink

React Router cung cấp hai component để tạo liên kết điều hướng:

• Link: thay thế thẻ <a> thông thường — điều hướng mà không reload trang
• NavLink: giống Link nhưng tự động thêm class active khi URL hiện tại khớp — dùng cho thanh menu

import { Link, NavLink } from 'react-router-dom'

function Navbar() {
  return (
    <nav style={{ display: 'flex', gap: '1rem' }}>
      {/* NavLink thêm class "active" tự động */}
      <NavLink 
        to="/" 
        style={({ isActive }) => ({ color: isActive ? 'blue' : 'black' })}
      >
        Trang chủ
      </NavLink>
      <NavLink to="/about">Giới thiệu</NavLink>
      <NavLink to="/contact">Liên hệ</NavLink>

      {/* Link thông thường */}
      <Link to="/login">Đăng nhập</Link>
    </nav>
  )
}

useNavigate — Điều hướng bằng code

Đôi khi bạn cần điều hướng người dùng từ trong code (không phải click vào link) — ví dụ sau khi đăng nhập thành công. Đây là lúc dùng hook useNavigate:

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

function LoginForm() {
  const navigate = useNavigate()
  const [email, setEmail] = React.useState('')

  const handleSubmit = (e) => {
    e.preventDefault()
    // Giả sử đăng nhập thành công
    console.log('Đăng nhập với:', email)
    navigate('/dashboard')  // Chuyển đến trang dashboard
  }

  const handleBack = () => {
    navigate(-1)  // Quay lại trang trước (như nút Back của browser)
  }

  return (
    <form onSubmit={handleSubmit}>
      <input 
        type="email" 
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="Email của bạn"
      />
      <button type="submit">Đăng nhập</button>
      <button type="button" onClick={handleBack}>Quay lại</button>
    </form>
  )
}

Ví dụ hoàn chỉnh — Ứng dụng 3 trang

Dưới đây là ứng dụng React hoàn chỉnh với 3 trang, navigation bar và trang 404:

// App.jsx — ứng dụng hoàn chỉnh
import { Routes, Route, NavLink } from 'react-router-dom'

// Các trang đơn giản
function Home() {
  return <main><h1>Trang chủ</h1><p>Chào mừng đến VietCode!</p></main>
}

function About() {
  return <main><h1>Giới thiệu</h1><p>VietCode là nơi học lập trình tiếng Việt.</p></main>
}

function Contact() {
  return <main><h1>Liên hệ</h1><p>Email: contact@vietcode.io</p></main>
}

function NotFound() {
  return <main><h1>404 — Không tìm thấy trang</h1></main>
}

// Style cho NavLink active
const navStyle = ({ isActive }) => ({
  color: isActive ? '#2563eb' : '#374151',
  fontWeight: isActive ? 'bold' : 'normal',
  textDecoration: 'none',
  marginRight: '1rem'
})

function App() {
  return (
    <div>
      <header style={{ padding: '1rem', borderBottom: '1px solid #e5e7eb' }}>
        <nav>
          <NavLink to="/" style={navStyle}>Trang chủ</NavLink>
          <NavLink to="/about" style={navStyle}>Giới thiệu</NavLink>
          <NavLink to="/contact" style={navStyle}>Liên hệ</NavLink>
        </nav>
      </header>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </div>
  )
}

export default App

Tổng kết

React Router v6 giúp bạn xây dựng điều hướng trong ứng dụng React với 4 thành phần chính:

• BrowserRouter: bọc toàn bộ app ở main.jsx
• Routes + Route: khai báo ánh xạ URL → component
• Link / NavLink: tạo liên kết điều hướng không reload trang
• useNavigate: điều hướng từ trong code JavaScript

React Router sử dụng React Hooks như useNavigate, useParams, useLocation — nên hãy làm quen với Hooks để khai thác tối đa sức mạnh của nó.

Xem thêm: React là gì? Hướng dẫn học React cho người mới