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

Khi bạn sử dụng React để phát triển một website, chắc chắn bạn sẽ cần quản lý các trang khác nhau trong ứng dụng, hay còn gọi là routing. Đây là lúc bạn cần đến React Router Dom, một thư viện giúp định tuyến, điều hướng giữa các trang mà không cần phải tải lại toàn bộ trang web.

Bài viết này sẽ giúp bạn dễ dàng nắm được những khái niệm cơ bản về React Router Dom và có thể áp dụng ngay vào ứng dụng của bạn.

1. React Router Dom là gì?

React Router Dom là một thư viện giúp bạn, định tuyến và điều hướng giữa các trang khác nhau trong ứng dụng React. Trong các ứng dụng web truyền thống, khi bạn nhấn vào một liên kết, trình duyệt sẽ tải lại toàn bộ trang. Nhưng với React Router, bạn có thể điều hướng giữa các trang mà không cần tải lại, giúp ứng dụng mượt và nhanh hơn.

2. Các thành phần chính trong React Router Dom

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

2.1 BrowserRouter

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

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 là nơi bạn định nghĩa đường dẫn URL và thành phần (component) nào sẽ được hiển thị khi bạn truy cập vào URL đó.

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;

• Khi truy cập vào đường dẫn /, Home sẽ được hiển thị.
• Khi truy cập vào đường dẫn /about, About sẽ xuất hiện.

2.3 Link

Link là cách để bạn tạo liên kết điều hướng giữa các trang trong ứng dụng React. Thay vì dùng thẻ <a> truyền thống, bạn sử dụng Link để điều hướ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>
  );
}

Khi bạn nhấn vào liên kết "Trang chủ" hoặc "Giới thiệu", ứng dụng sẽ điều hướng tới các trang tương ứng mà không cần tải lại.

2.4 Routes (trong React Router v6)

Trong các phiên bản cũ của React Router, bạn sẽ thấy thành phần Switch, nhưng từ phiên bản v6 trở đi, React Router đã thay thế Switch bằng Routes. Routes giú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;

Ở ví dụ trên, chỉ một trong hai trang Home hoặc About sẽ được hiển thị tùy thuộc vào URL mà bạn truy cập.

2.5 Navigate

Navigate là thành phần cho phép bạn chuyển hướng đến page khác thông qua code JavaScript hoặc Typescript thay vì nhấn vào link.

Thường hữu ích khi bạn cần chuyển hướng sau khi thực hiện hành động nào đó, ví dụ như chuyển đến trang Home khi bạn đăng nhập thành công.

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

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

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

Trong ví dụ, nếu bạn đã đăng nhập ( biến isLoggedIn là true), sẽ được tự động chuyển hướng tới trang dashboard. Ngược lại, sẽ hiển thị vui lòng đăng nhập.

2.6 useParams và useNavigate

Với hai hook này giúp bạn dễ dàng làm việc với các URL động và điều hướng trong React Router.

• useParams: lấy tham số từ URL. Ví dụ, nếu URL là /users/200, bạn có thể lấy 200 ra.

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

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

• useNavigate: điều hướng thông qua code JS hoặc TS, tương tự như Navigate, nhưng linh hoạt hơn khi cần chuyển hướng từ mộ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>;
}

Khi người dùng nhấn vào button "Đăng nhập", nếu đăng nhập thành công, họ sẽ được chuyển hướng tới trang dashboard.

3. Hướng dẫn xây dựng dự án sử dụng React Router

Bạn cần phải khởi tạo một dự án React trước đó, nếu bạn chưa rõ cụ thể như thế nào, bạn có thể tham khảo tại đây.

Sau khi bạn đã hiểu về các thành phần mình vừa giới thiệu ở trên. Tiếp theo, hãy cùng mình áp dụng nó vào dự án nhé.

B1: Cài đặt thư viện React Router Dom

npm install react-router-dom

B2: Bạn tạo các trang khác nhau ví dụ như Home.ts, About.ts

import React from 'react'

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

B3: Thiết lập Router trong ứng dụng: sử dụng BrowserRouter, Routes, và Route để điều hướng giữa các trang.

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;

B4: Tạo liên kết điều hướng: sử dụng Link để tạo các liên kết giúp người dùng di chuyển giữa các trang.

import React from 'react'

export default 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 giúp bạn dễ dàng quản lý và điều hướng giữa các trang trong ứng dụng React mà không cần reload trang, làm cho ứng dụng trở nên nhanh và mượt hơn, đồng thời mang lại trải nghiệm tốt cho 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 hay useNavigate, bạn sẽ dễ dàng xây dựng ứng dụng hoàn thiện của riêng mình.

Các bài viết liên quan:

• CSS Modules là gì? Giải pháp quản lý Styles trong dự án
• Vite là gì? Hướng dẫn Khởi tạo dự án React với Vite
• ESLint là gì? Hướng dẫn cấu hình ESLint cho dự án Typescript
• Thư viện Husky là gì? Đảm bảo chất lượng Code với Git Hooks và Husky