Khái niệm

React Router Dom là thư viện giúp chúng ta quản lý việc định tuyến trong ứng dụng React một cách dễ dàng và linh hoạt hơn.

Cài đặt

Câu lệnh cài đặt như sau:

npm install react-router-dom

Cú pháp

Hãy theo dõi ví dụ sau:

import React from 'react';
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';

const Home = () => <h1>Trang chủ</h1>;
const About = () => <h1>Giới thiệu</h1>;
const Contact = () => <h1>Liên hệ</h1>;

const App = () => {
  return (
    <BrowserRouter>
      <nav>
        <ul>
          <li>
            <Link to="/">Trang chủ</Link>
          </li>
          <li>
            <Link to="/about">Giới thiệu</Link>
          </li>
          <li>
            <Link to="/contact">Liên hệ</Link>
          </li>
        </ul>
      </nav>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </BrowserRouter>
  );
};

export default App;

Trong ví dụ trên :

• Chúng ta sử dụng BrowserRouter để bao bọc toàn bộ ứng dụng.
• Trong phần <nav>, chúng ta sử dụng thành phần Link để tạo các liên kết đến các trang con.
• Trong phần <Routes>, chúng ta sử dụng thành phần Route để định nghĩa các đường dẫn đến các trang con và cung cấp thành phần tương ứng để hiển thị nội dung.

BrowserRouter

BrowserRouter là một thành phần chính trong react-router-dom và được sử dụng để bọc toàn bộ ứng dụng của bạn.

Ví dụ

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

function App() {
  return (
    <BrowserRouter>
      {/* Nội dung ứng dụng */}
    </BrowserRouter>
  );
}

Routes

Routes được sử dụng để phân định 2 thành phần:

• Phần tĩnh : được bọc bên trong Routes, thích hợp để chứa Header và Footer, vì chúng sẽ không thay đổi khi chuyển path URL
• Phần động : là vùng nằm ngoài Routes và bên trong Browser Router

Tham khảo ví dụ sau:

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

function App() {
  return (
    <BrowserRouter>
      //phần động
      //header
      <Routes>
        //phần tĩnh
      </Routes>
      //phần động
      //footer
    </BrowserRouter>
  );
}

Route

Routes được sử dụng để định nghĩa các tuyến đường trong ứng dụng của bạn thông qua :

• path (đường dẫn)
• element thành phần component đại diện khi url tham chiếu tới path

Dưới đây là ví dụ về cách sử dụng Routes:

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

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

Trong ví dụ trên, khi URL là “/“ thì thành phần Home sẽ được hiển thị, và khi URL là “/about” thì thành phần About sẽ được hiển thị.

Link

Link được sử dụng để thay thế các thẻ <a> thông thường, dùng để chuyển hướng giữa các trang mà không làm tải lại toàn bộ trang.

Hãy xem ví dụ sau:

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

function Navigation() {
  return (
    <nav>
      <ul>
        <li>
          <Link to="/">Trang chủ</Link>
        </li>
        <li>
          <Link to="/about">Về chúng tôi</Link>
        </li>
      </ul>
    </nav>
  );
}

Trong ví dụ trên, khi người dùng nhấp vào liên kết “Trang chủ”, URL sẽ được cập nhật thành “/“ và thành phần tương ứng sẽ được hiển thị.