React Router Dom là gì? Cách điều hướng trong ứng dụng React

Khi phát triển ứng dụng web với thư viện React, một trong những thách thức lớn là quản lý các trang khác nhau mà không làm gián đoạn trải nghiệm người dùng. Để giải quyết vấn đề này, React Router Dom ra đời như một công cụ mạnh mẽ giúp bạn thực hiện điều này một cách dễ dàng và hiệu quả. Bài viết này sẽ cung cấp cái nhìn tổng quan về React Router Dom, các thành phần chính và hướng dẫn bạn xây dựng ứng dụng với định tuyến mượt mà.

1. React Router Dom Là Gì?

React Router Dom là một thư viện giúp quản lý định tuyến và điều hướng giữa các trang trong ứng dụng React. Thay vì phải tải lại toàn bộ trang mỗi khi người dùng muốn chuyển đổi giữa các đường dẫn, React Router Dom cho phép bạn điều hướng mà không cần tải lại trang, tạo ra trải nghiệm mượt mà và nhanh chóng cho người dùng.

React Router Dom là gì?

2. Các Thành Phần Chính Trong React Router Dom

Để sử dụng React Router Dom hiệu quả, bạn cần hiểu rõ về một số thành phần cơ bản sau:

2.1 BrowserRouter

BrowserRouter là thành phần bao bọc toàn bộ ứng dụng, cho phép React Router hoạt động. Nó sử dụng API của trình duyệt để quản lý URL, đảm bảo rằng khi bạn điều hướng, URL trên thanh địa chỉ sẽ thay đổi mà không làm mới toàn bộ trang.

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

function App() {
  return (
    <BrowserRouter>
      {/* Các thành phần khác trong ứng dụng */}
    </BrowserRouter>
  );
}

export default App;

2.2 Route

Route giúp bạn định nghĩa các đường dẫn URL và thành phần (component) nào sẽ được hiển thị khi người dùng truy cập vào đường dẫn nhất định.

import { Route } from 'react-router-dom';
import Home from './Home';
import About from './About';

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

export default App;

2.3 Link

Link là thành phần giúp tạo liên kết điều hướng giữa các trang trong ứng dụng React. Đây là phương pháp ưu việt hơn so với thẻ <a> thông thường, vì nó giúp duy trì trạng thái của ứng dụng mà không tải lại trang.

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

function Navbar() {
  return (
    <nav>
      <Link to="/">Trang chủ</Link>
      <Link to="/about">Giới thiệu</Link>
    </nav>
  );
}

2.4 Routes (trong React Router v6)

Từ phiên bản v6, React Router đã thay thế Switch bằng Routes. Routes cho phép ứng dụng chỉ hiển thị một trang duy nhất dựa trên URL hiện tại.

import { Routes, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';

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

export default App;

2.5 Navigate

Navigate là thành phần cho phép bạn chuyển hướng đến một trang khác thông qua mã JavaScript, rất hữu ích khi bạn cần chuyển hướng tự động sau khi thực hiện một hành động nhất định.

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

function Login({ isLoggedIn }) {
  if (isLoggedIn) {
    return <Navigate to="/dashboard" />;
  }

  return <div>Vui lòng đăng nhập</div>;
}

2.6 useParams và useNavigate

Hai hook cực kỳ hữu ích trong React Router là useParams và useNavigate.

• useParams: Dùng để lấy thông tin từ URL. Ví dụ, nếu URL là /users/200, bạn có thể lấy giá trị 200.

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

function User() {
  const { id } = useParams();
  return <div>ID người dùng: {id}</div>;
}

• useNavigate: Hỗ trợ điều hướng thông qua mã JS, linh hoạt hơn trong việc chuyển hướng từ sự kiện hay hành động.

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

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

  const handleLogin = () => {
    // Xử lý đăng nhập thành công
    navigate('/dashboard');
  };

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

3. Hướng Dẫn Xây Dựng Dự Án Sử Dụng React Router

Để bắt đầu với React Router, bạn cần thực hiện các bước sau:

Bước 1: Cài đặt thư viện React Router Dom

npm install react-router-dom

Bước 2: Tạo các trang khác nhau, ví dụ Home.ts, About.ts

import React from 'react';

export default function Home() {
  return (
    <div>Home</div>
  );
}

Bước 3: Thiết lập Router trong ứng dụng

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';

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

export default App;

Bước 4: Tạo liên kết điều hướng

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

function Navbar() {
  return (
    <nav>
      <Link to="/">Trang chủ</Link>
      <Link to="/about">Giới thiệu</Link>
    </nav>
  );
}

4. Kết Luận

React Router Dom mang đến cho các nhà phát triển một công cụ mạnh mẽ để quản lý và điều hướng giữa các trang trong ứng dụng React mà không cần phải tải lại trang, cùng với đó là giảm thiểu thời gian chờ đợi và cải thiện trải nghiệm người dùng. Bằng cách nắm vững các khái niệm như BrowserRouter, Route, Link, và các hook như useParams, useNavigate, bạn có thể xây dựng ứng dụng của mình một cách dễ dàng và hiệu quả.