Hướng Dẫn Sử Dụng React Router Để Xây Dựng Ứng Dụng Trang Đơn (SPA)

Giới Thiệu

Ứng dụng trang đơn (Single Page Applications - SPA) đã tạo nên một cuộc cách mạng trong lĩnh vực phát triển web. Tính năng nổi bật của SPA là tạo ra trải nghiệm người dùng linh hoạt và năng động hơn so với các ứng dụng đa trang truyền thống. Thay vì phải tải lại toàn bộ trang web mỗi lần người dùng thực hiện thao tác, SPA chỉ tải một trang HTML duy nhất và cập nhật nội dung khi người dùng tương tác. Điều này mang lại cảm giác tương tự như sử dụng ứng dụng desktop, đồng thời cải thiện hiệu suất và mức độ tương tác.

Nếu bạn đã có kiến thức cơ bản về React và cách thiết lập một dự án React, hãy cùng bắt đầu tìm hiểu về React Router và cách sử dụng nó để xây dựng ứng dụng SPA của bạn.

React Router Là Gì?

React Router là một thư viện mạnh mẽ giúp quản lý điều hướng và định tuyến trong các ứng dụng React. Trong đó, React Router DOM được sử dụng riêng cho ứng dụng web với một số API dành riêng cho DOM.

Khám Phá Các Khái Niệm Cốt Lõi Của React Router DOM

Trong bài viết này, chúng ta sẽ tìm hiểu về các khái niệm cơ bản và cách triển khai chúng trong ứng dụng React của bạn để tạo ra một hệ thống điều hướng đơn giản và hiệu quả.

Cài Đặt React Router

Để sử dụng React Router trong ứng dụng của bạn, đầu tiên, bạn cần cài đặt gói react-router-dom bằng lệnh sau:

npm install react-router-dom

Sau khi cài đặt thành công, bạn có thể bắt đầu quá trình định tuyến trong dự án của mình.

Các Thành Phần Chính Trong React Router DOM

1. BrowserRouter

BrowserRouter là thành phần gốc chứa tất cả các thành phần định tuyến. Tất cả các đường dẫn trong ứng dụng của bạn phải được khai báo bên trong BrowserRouter. Nó giúp quản lý vị trí hiện tại trong thanh địa chỉ của trình duyệt thông qua URL.

Để sử dụng, nhập nó từ react-router-dom và áp dụng trong tệp App.jsx của bạn:

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

function App() {
  return (
    <BrowserRouter>

    </BrowserRouter>
  );
}

export default App;

2. Routes

Routes là thành phần thay thế cho Switch được sử dụng trong các phiên bản trước. Nó vận hành như một thành phần cha và hiển thị các routes con phù hợp đầu tiên dựa trên URL hiện tại:

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

function App() {
  return (
    <BrowserRouter>
      <Routes>

      </Routes>
    </BrowserRouter>
  );
}

export default App;

3. Route

Route là thành phần con với hai thuộc tính: path và element. path xác định đường dẫn trong khi element là thành phần cần được hiển thị:

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

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path='/' element={<Home />} />
        <Route path='pricing' element={<Pricing />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

4. Undeclared Routes

Để xử lý các route không tồn tại, bạn có thể tạo một thành phần hiển thị thông báo lỗi 404:

<Route path='*' element={<PageNotFound />} />

5. Nested Routes

Các route có thể chứa các sub-route. Ví dụ:

<Route path='categories' element={<Categories />}>
  <Route path='male' element={<Male />} />
  <Route path='female' element={<Female />} />
</Route>

6. Link

Link tương tự như thuộc tính anchor href, cho phép người dùng điều hướng đến các trang:

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

export default function PageNav() {
  return (
    <> 
      <Link to='/'>Home</Link> 
      <Link to='pricing'>Pricing</Link>
    </>
  );
}

7. NavLink

NavLink không chỉ giúp điều hướng mà còn cho phép thêm kiểu điều kiện:

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

export default function PageNav() {
  return (
    <> 
      <NavLink to='/'>Home</NavLink>
      <NavLink to='pricing'>Pricing</NavLink>
    </>
  );
}

8. Outlet

Outlet cho phép hiển thị các UI con trong các tuyến đường lồng nhau:

<Outlet />

9. Hook useNavigate

Sử dụng useNavigate để điều hướng theo chương trình giữa các tuyến đường:

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

const navigate = useNavigate();

10. Hook useParams

Trả về một đối tượng chứa các params từ URL hiện tại:

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

const { id } = useParams();

Kết Luận

Trong bài viết này, chúng ta đã khám phá các khái niệm và cách triển khai Client Side Routing (CSR) trong các ứng dụng web React. React Router, thông qua thư viện React-Router-DOM, cho phép các ứng dụng cập nhật URL nhanh chóng mà không cần yêu cầu máy chủ một tài liệu mới, từ đó nâng cao trải nghiệm người dùng và hiệu suất ứng dụng.

Cám ơn bạn đã theo dõi!
source: viblo