Navigation do chúng ta tự cài đặt cũng tương đối thú vị, tuy nhiên nó khó có thể trở thành thư viện để nhiều người dùng chung được, dẫn đến việc maintain dự án rất khó khăn. Vậy tốt hơn hết là chúng ta nên sử dụng thư viện đã được cung cấp sẵn, cụ thể là thư viện react-router-dom nhé.

Cấu hình dự án

Chúng ta sẽ cần cài đặt thư viện react-router-dom thông qua lệnh:

npm i react-router-dom

Cài đặt

Đầu tiên chúng ta sẽ cần thay đổi mã nguồn của tập tin App.tsx như sau:

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Entry from './Entry';
import Page1 from './Page1';
import Page2 from './Page2';

function App() {
  return (
    <Router>
        <Routes>
          <Route path="/" element={<Entry />} />
          <Route path="/entry" element={<Entry />} />
          <Route path="/page1" element={<Page1 />} />
          <Route path="/page2" element={<Page2 />} />
        </Routes>
    </Router>
  );
}

export default App

Ở đây chúng ta có:

  1. Router: Là thành phần bao bọc toàn bộ ứng dụng. Nó quản lý URL và quyết định sẽ hiển thị component nào dựa trên URL.
  2. Routes: Là thành phần để render component tương ứng với từng URL.
  3. Route: Mỗi Route xác định một đường dẫn URL và component tương ứng sẽ được render khi URL đó được truy cập.
    Tiếp theo chúng ta sẽ thay đổi mã nguồn của các trang như sau:
    Trang Entry:
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import { useNavigate } from 'react-router-dom';

function Entry() {

  const navigate = useNavigate();

  return (
    <>
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => navigate("/page1")}>
          Move to Page 1
        </button>
        <button onClick={() => navigate("/page2")}>
          Move to Page 2
        </button>
        <button onClick={() => navigate(-1)}>
          Back
        </button>
        <p>
          Edit <code>src/App.tsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  )
}

export default Entry

Trang Page1:

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

function Page1() {

  const navigate = useNavigate();

  return (
    <>
      <h1>Techmaster</h1>
      <div className="card">
        <p>Page 1</p>
        <button onClick={() => navigate("/entry")}>
          Back to Entry
        </button>
        <button onClick={() => navigate("/page2")}>
          Move to Page 2
        </button>
        <button onClick={() => navigate(-1)}>
          Back
        </button>
      </div>
    </>
  )
}

export default Page1

Trang Page2:

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

function Page1() {

  const navigate = useNavigate();

  return (
    <>
      <h1>Techmaster</h1>
      <div className="card">
        <p>Page 2</p>
        <button onClick={() => navigate(-1)}>
          Back
        </button>
      </div>
    </>
  )
}

export default Page1

Ở đây chúng ta thấy có đoạn mã const navigate = useNavigate(); Mã nguồn cài đặt của hàm useNavigate trên thực tế sẽ như sau:

export function useNavigate(): NavigateFunction {
  let { isDataRoute } = React.useContext(RouteContext);
  // Conditional usage is OK here because the usage of a data router is static
  // eslint-disable-next-line react-hooks/rules-of-hooks
  return isDataRoute ? useNavigateStable() : useNavigateUnstable();
}

Đây là một ứng dụng của việc sử dụng hàm react hook useContext.
Thông qua hàm navigate chúng ta sẽ chuyển được đến trang chúng ta muốn, và khi sử dụng navigate(-n) với n là số trang chúng ta muốn bỏ qua, chúng ta có thể trở lại trang trước đó, đây cũng là một ứng dụng của stack navigation.

Khởi chạy chương trình

Khởi chạy chương trình bằng lệnh yarn dev và truy cập vào địa chỉ http://localhost:5173/ chúng ta sẽ thây giao diện hiện ra:

Chúng ta có thể nhấn vào các nut Move to Page 1, Move to page2, Back và sẽ nhận được kết quả tương tự như stack navigation chúng ta đã cài đặt trước đó.

Tổng kết

Như vậy chúng ta đã cùng nhau tìm hiểu react navigation bằng cách sử dụng thư viện react-router-dom.

Cám ơn bạn đã quan tâm đến bài viết này. Để nhận được thêm các kiến thức bổ ích bạn có thể:

  1. Đọc các bài viết của TechMaster trên facebook: https://www.facebook.com/techmastervn
  2. Xem các video của TechMaster qua Youtube: https://www.youtube.com/@TechMasterVietnam nếu bạn thấy video/bài viết hay bạn có thể theo dõi kênh của TechMaster để nhận được thông báo về các video mới nhất nhé.
  3. Chat với techmaster qua Discord: https://discord.gg/yQjRTFXb7a