Hiện nay, ReactJS đã không còn xa lạ với các lập trình viên web, nhưng bản thân nó lại đang không cung cấp cách để có thể quản lý định tuyến giữa các thành phần. Do vậy, khi sử dụng ReactJS chúng ta sẽ phải làm quen thêm với một khái niệm đó là "Router". Do đó, trong bài viết này chúng ta sẽ cùng nhau tìm hiểu về Router trong ReactJS là gì cũng như là cách sử dụng nó trong ReactJS.

>>> Xem thêm bài viết trong chuỗi bài về ReactJS tại đây:

1. Router là gì?

Trong một ứng dụng web, chúng ta sẽ có rất nhiều trang web khác nhau, để có thể quản lý, cũng như điều hướng giữa những trang này chúng ta cần sử dụng Router. Router giúp chia ứng dụng thành cách "trang" ảo, mỗi trang này tương ứng với một thành phần ReactJS cụ thể. 

Khi người dùng thực hiện các hành động như nhấn vào liên kết hoặc nhập URL, Router sẽ có tác dụng chuyển đổi giữa các trang mà không cần phải tải lại toàn bộ trang web.

2. Các thành phần chính của Router trong ReactJS

2.1. BrowserRouter trong React Router

  • BrowserRouter là một thành phần được sử dụng để bọc toàn bộ ứng dụng ReactJS.
  • Nó sử dụng HTML5 history API để giữ cho URL được đồng bộ với trạng thái ứng dụng.
import { BrowserRouter as Router } from 'react-router-dom';

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

>>>>> Xem các bài viết tương tự tại đây:

2.2. Route trong React Router

  • Route là thành phần để xác định một đường dẫn và liên kết nó với một component React cụ thể.
  • Nếu đường dẫn trên thanh địa chỉ phù hợp với định nghĩa trong Route, component được chỉ định sẽ được hiển thị.
import { Route } from 'react-router-dom';

function App() {
  return (
    <div>
      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
    </div>
  );
}
  • Link là thành phần tạo ra liên kết giữa các trang mà không làm tải lại trang.
  • Thông thường chúng ta sẽ sử dụng thẻ <a>, trong trường hợp này nó sẽ khiến cho trang web tải lại toàn bộ từ đầu. Để tránh việc này, chúng ta cần sử dụng Link để trang web chỉ render lại những phần cần thiết.
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>
  );
}

2.4. Switch trong React Router

  • Switch được sử dụng để bao bọc các thành phần Route, với Route trang web sẽ render và hiển thị các thành phần đầu tiên phù hợp với địa chỉ. Điều này giúp tránh hiển thị nhiều component cùng lúc.

2.5. Redirect trong React Router

  • Redirect là một thành phần được sử dụng để chuyển hướng người dùng từ một đường dẫn khác.
  • Nếu người dùng truy cập đường dẫn được xác định trong Redirect, họ sẽ được chuyển hướng đến địa chỉ mới.
import { Redirect } from 'react-router-dom';

function App() {
  return (
    <div>
      <Redirect from="/old-path" to="/new-path" />
    </div>
  );
}

Phía trên chỉ là một số thành phần chính trong React Router. Còn rất nhiều tính năng cũng như thành phần khác mà chúng ta hoàn toàn có thể sử dụng cho React Router. 

3. Cách sử dụng Router trong ReactJS

3.1. Cài đặt React Router

Thông thường, thư viện React Router được cài đặt mặc định khi chúng ta khởi tạo ứng dụng ReactJS. Nhưng ta cũng có thể sử dụng npm hoặc yarn để cài đặt thư viện React Router như sau:

npm install react-router-dom
# hoặc
yarn add react-router-dom

3.2. Xác định các định tuyến với Router trong ReactJS

Chúng ta cần sử dụng Router để xác định định tuyến và liên kết chúng với các component ReactJS. Chúng ta cùng xem qua ví dụ sau:

import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Trang Chủ</Link>
            </li>
            <li>
              <Link to="/about">Về Chúng Tôi</Link>
            </li>
          </ul>
        </nav>

        <Route path="/" exact component={HomePage} />
        <Route path="/about" component={AboutPage} />
      </div>
    </Router>
  );
}

Sau khi đã xác định được các định tuyến thông qua Router, chúng ta cần sử dụng thêm component Link để tạo liên kết giữa các trang web như sau:

<Link to="/about">Go to about page</Link>

Tổng kết

React Router là một công cụ mạnh mẽ giúp quản lý định tuyến trong ứng dụng ReactJS của bạn. Với khả năng chia thành trang và điều hướng dễ dàng, nó giúp xây dựng ứng dụng web linh hoạt và dễ bảo trì. Hãy tiếp tục theo dõi Stringee để cập nhật kiến thức bổ ích về lập trình mỗi ngày bạn nhé!

Stringee Communication APIs là giải pháp cung cấp các tính năng giao tiếp như gọi thoại, gọi video, tin nhắn chat, SMS hay tổng đài CSKH cho phép tích hợp trực tiếp vào ứng dụng/website của doanh nghiệp nhanh chóng. Nhờ đó giúp tiết kiệm đến 80% thời gian và chi phí cho doanh nghiệp bởi thông thường nếu tự phát triển các tính năng này có thể mất từ 1 - 3 năm.

Bộ API giao tiếp của Stringee hiện đang được tin dùng bởi các doanh nghiệp ở mọi quy mô, lĩnh vực ngành nghề như TPBank, VOVBacsi24, VNDirect, Shinhan Finance, Ahamove, Logivan, Homedy, Adavigo, bTaskee…

Quý bạn đọc quan tâm xin mời đăng ký NHẬN TƯ VẤN TẠI ĐÂY: 

Banner bottom