Cách sử dụng React Router V6: Hướng dẫn cho người mới bắt đầu

React Router là thư viện phổ biến nhất mà bạn có thể sử dụng để triển khai định tuyến trong ứng dụng React. Nó cung cấp cách tiếp cận dựa trên thành phần để xử lý nhiều tác vụ định tuyến khác nhau, bao gồm điều hướng trang, tham số truy vấn, v.v.

React Router Phiên bản 6 thực hiện các sửa đổi đáng kể đối với thuật toán định tuyến của nó nhằm khắc phục những thiếu sót vốn có trong các phiên bản phần mềm trước đó và cung cấp một hệ thống quản lý tuyến đường tiên tiến và hiệu quả hơn.

Bắt đầu định tuyến bằng React Router V6

Để bắt đầu quá trình, bạn có thể thiết lập ứng dụng React hoặc định cấu hình dự án React sử dụng Vite làm máy chủ phát triển của mình. Sau khi dự án đã được thiết lập, hãy tiến hành giới thiệu thư viện Reac-router-dom trong phần phụ thuộc của dự án.

 npm install react-router-dom 

Tạo Route bằng React Router

Đóng gói toàn bộ ứng dụng trong thành phần BrowserRouter là một phương tiện hiệu quả để tạo các tuyến đường. Để đạt được điều này, vui lòng cập nhật các tệp JavaScript có liên quan, chẳng hạn như index.jsx hoặc main.jsx. Bằng cách kết hợp sửa đổi được đề xuất, bạn sẽ thiết lập thành công nền tảng định tuyến trong ứng dụng của mình.

 import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import { BrowserRouter as Router } from 'react-router-dom';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <Router>
      <App/>
    </Router>
  </React.StrictMode>,
)

Việc sử dụng trình bao bọc BrowserRouter xung quanh thành phần Ứng dụng sẽ cấp quyền truy cập đầy đủ vào chức năng và khả năng định tuyến do thư viện React Router cung cấp, bao gồm toàn bộ ứng dụng.

Sử dụng Thành phần Tuyến đường

Khi ứng dụng của bạn đã được bao gồm bởi thành phần BrowserRouter, bạn có thể mô tả cấu hình định tuyến.

Thành phần Routes thể hiện sự tiến bộ đáng kể so với thành phần tiền thân của nó, thành phần Switch, về mặt chức năng trong React Router. Thành phần này cung cấp hỗ trợ định tuyến tương đối, cho phép chuyển đổi suôn sẻ giữa các phần khác nhau của ứng dụng; nó cũng có tính năng xếp hạng tuyến đường tự động, đảm bảo rằng người dùng được dẫn đến nội dung phù hợp nhất dựa trên lịch sử điều hướng của họ; Ngoài ra, nó có thể xử lý các tuyến lồng nhau, cho phép các nhà phát triển tạo ra các hệ thống phân cấp phức tạp của các trang một cách dễ dàng.

Nói chung, các tuyến đường thường được xác định trong thành phần cấp cao nhất của ứng dụng, chẳng hạn như thành phần Ứng dụng. Tuy nhiên, vị trí của họ có thể khác nhau tùy theo cơ cấu tổ chức cụ thể của dự án.

Vui lòng mở tệp “App.jsx” nằm trong thư mục dự án của bạn và thay thế mã React mặc định được tìm thấy trong đó bằng mẫu được cung cấp bên dưới:

 import './App.css'
import { Routes, Route } from 'react-router-dom';
import Dashboard from './pages/Dashboard';
import About from './pages/About';

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

export default App 

Thiết lập định tuyến nói trên sẽ hướng các đường dẫn URL được chỉ định đến các thành phần trang tương ứng, cụ thể là Bảng điều khiển và Giới thiệu, do đó đảm bảo rằng ứng dụng hiển thị đúng thành phần khi được truy cập thông qua một địa chỉ URL cụ thể.

Hãy xem xét chức năng của thuộc tính’phần tử’được tìm thấy trong thành phần Tuyến, cho phép một thành phần truyền tải một thành phần chức năng thay vì chỉ xác định chỉ định của nó. Sự sắp xếp như vậy cho phép truyền các thuộc tính thông qua các đường dẫn được định tuyến và các phần tử tương ứng của chúng.

Trong thư mục nguồn, thiết lập một phần thư mục mới có tên là “trang”, sau đó kết hợp hai tệp mới có tên “Dashboard.jsx” và “About.jsx”. Sử dụng các tệp này để thử nghiệm các tuyến đường khác nhau.

Sử dụng createBrowserRouter để xác định tuyến đường

Tài liệu của React Router khuyên bạn nên sử dụng thành phần createBrowserRouter để xác định cấu hình định tuyến cho các ứng dụng web React. Thành phần này là một giải pháp thay thế nhẹ cho BrowserRouter, lấy một loạt các tuyến đường làm đối số.

Việc kết hợp phần tử này sẽ loại bỏ yêu cầu xác định tuyến đường trong thành phần Ứng dụng. Thay vào đó, có thể thiết lập tất cả các cấu hình tuyến đường trong tệp index.jsx hoặc main.jsx.

Chắc chắn, đây là một phiên bản tinh tế của tuyên bố đó:scssVí dụ, chúng ta hãy xem xét một kịch bản trong đó một người sử dụng phần tử này:

 import React from 'react'
import ReactDOM from 'react-dom/client'
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import App from './App.jsx'
import Dashboard from './pages/Dashboard';
import About from './pages/About';


const router = createBrowserRouter([
  {
    path: "/",
    element: <App/>,
  },
  {
    path: "/dashboard",
    element: <Dashboard/>,
  },
  {
    path: "/about",
    element: <About/>,
  },
]);

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <RouterProvider router={router}/>
  </React.StrictMode>
); 

Việc sử dụng các thành phần createBrowserRouter và RouterProvider tạo điều kiện thuận lợi cho việc thiết lập cơ sở hạ tầng định tuyến trong ứng dụng dựa trên React, tận dụng khả năng của chúng để điều hướng người dùng một cách hiệu quả trên các trang hoặc chức năng được kết nối khác nhau của chương trình.

Trong cách triển khai cụ thể này, có sự khác biệt so với cách tiếp cận thông thường trong đó thành phần BrowserRouter đóng gói toàn bộ ứng dụng. Thay vào đó, thành phần RouterProvider được sử dụng để truyền tải bối cảnh Bộ định tuyến đến mọi bộ phận cấu thành trong phần mềm bằng khả năng cung cấp của nó.

Triển khai các tuyến không tìm thấy trang

Chức năng của prop path trong bối cảnh thành phần Route của React Router nằm ở khả năng thực hiện so sánh giữa đường dẫn được chỉ định và URL hiện tại, với mục tiêu cuối cùng là xác định xem chúng có căn chỉnh để điều hướng thành công hay không xảy ra.

Để giải quyết các trường hợp khi không có tuyến đường nào phù hợp, có thể thiết lập một đường dẫn được chỉ định để quản lý cụ thể lỗi “Không tìm thấy trang 404”. Bằng cách kết hợp tuyến đường như vậy, người dùng cuối sẽ có thể nhận được câu trả lời dễ hiểu trong trường hợp họ cố gắng truy cập một URL không hợp lệ.

Để kết hợp tuyến đường 404 trong ứng dụng, bạn phải đưa tuyến đường đó vào RouteComponent như sau:

 // using the Route component
<Route path="*" element={<NotFound />} />

 // using createBrowserRouter
{ path: "*", element: <NotFound />, }, 

Chúng ta sẽ tạo một thành phần NotFound tùy chỉnh mở rộng NotFoundRouteComponent được tích hợp sẵn của React. Sau đó, chúng tôi sẽ sử dụng thành phần này để hiển thị khi không tìm thấy trang được yêu cầu trên máy chủ. Để đạt được điều này, trước tiên chúng ta cần cài đặt Axios để thực hiện các yêu cầu API và tạo kiểu cho các thành phần của chúng ta bằng Mô-đun CSS. Cuối cùng, chúng tôi sẽ nhập và sử dụng các gói này trong mã của mình.

Dấu hoa thị (*) đóng vai trò giữ chỗ cho bất kỳ ký tự nào trong biểu thức chính quy, cho phép nó chứa các trường hợp khi không có tuyến đường cụ thể nào khớp với URL đã cho.

Điều hướng theo chương trình bằng cách sử dụng hook useNavigate

Việc sử dụng hook useNavigate thể hiện một cách tiếp cận công cụ để quản lý điều hướng trong các ứng dụng phần mềm. Đặc biệt, hook này tỏ ra thuận lợi khi điều hướng kết hợp với các hành động hoặc lần xuất hiện do người dùng thực hiện, bao gồm cả việc nhấn nút và gửi biểu mẫu.

Thật vậy, người ta phải mua hook useNavigate từ gói React Router quý giá để tạo điều kiện thuận lợi cho các hoạt động điều hướng thông qua việc triển khai thành phần chức năng About.jsx.

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

Kết hợp thành phần giao diện người dùng trong bố cục ứng dụng, khi được kích hoạt, thành phần này sẽ chuyển hướng người dùng đến một đường dẫn được chỉ định.

 function About() {
  const navigate = useNavigate();

  const handleButtonClick = () => {
    navigate("/");
  };

  return (
    <>//Rest of the code ...
      <button onClick={handleButtonClick}>
    </>
  );
}

export default About; 

Điều quan trọng cần lưu ý là mặc dù hook useNavigate và hook useNavigation, cả hai đều được giới thiệu trong React Router phiên bản 6, có chung quy ước đặt tên, nhưng chúng có chức năng và mục đích khác nhau.

Việc sử dụng hook useNavigation cho phép một người truy cập vào thông tin thích hợp liên quan đến điều hướng, bao gồm trạng thái điều hướng hiện tại và nhiều thông tin chi tiết bổ sung khác. Chức năng như vậy có thể có lợi trong việc hiển thị các thành phần giao diện người dùng, chẳng hạn như các chỉ báo tải, cung cấp sự trình bày trực quan về các hoạt động đang diễn ra.

Chắc chắn, đây là bản trình bày tinh tế của ví dụ được cung cấp minh họa cách triển khai useNavigation hook:

 import { useNavigation } from "react-router-dom";

function SubmitButton() {
  const navigation = useNavigation();

  const buttonText =
    navigation.state === "submitting"
      ? "Saving..."
      : navigation.state === "loading"
        ? "Saved!"
        : "Go";

  return <button type="submit">{buttonText}</button>;
} 

Đoạn mã đã cho thể hiện một thành phần chức năng React có tên là “SubmitButton”, sử dụng Hook tùy chỉnh “useNavigation” để lấy trạng thái điều hướng hiện tại. Điều này cho phép nhãn của nút được cập nhật linh hoạt để đáp ứng những thay đổi trong tương tác của người dùng với ứng dụng.

Mặc dù có các chức năng riêng biệt nhưng chúng vẫn có thể sử dụng song song cả hook “useNavigate” và “useNavigation”. Cái trước đóng vai trò là cơ chế khởi tạo cho các quy trình điều hướng trong khi cái sau cung cấp quyền truy cập vào dữ liệu điều hướng trực tiếp xác định loại phản hồi giao diện người dùng sẽ được hiển thị trong môi trường trình duyệt.

Sử dụng hook useRoutes

Móc hiện tại cho phép đặc tả các lộ trình cùng với các thành phần tương quan của chúng một cách toàn diện, từ đó tạo điều kiện thuận lợi cho quá trình đối sánh các tuyến đường và do đó hiển thị các thành phần thích hợp.

Chắc chắn đây là một minh họa tao nhã thể hiện công dụng của tiện ích này:

 import { useRoutes } from 'react-router-dom';
import Dashboard from './Dashboard';
import About from './About';

const routes = [
  {
    path: '/',
    element: <Dashboard/>,
  },
  {
    path: '/about',
    element: <About />,
  },
];

function App() {
  const routeResult = useRoutes(routes);
  return routeResult;
}

export default App; 

Đối tượng tuyến đường đóng vai trò trung gian giữa các URL và các thành phần tương ứng của chúng trong ứng dụng. Bằng cách sử dụng đối tượng này, thành phần Ứng dụng có thể ánh xạ thành công URL hiện tại tới thành phần tương ứng bằng cách tận dụng quy trình so khớp được thiết lập thông qua các tuyến đã xác định.

Việc tận dụng tính năng này cho phép bạn quản lý chính xác kiến ​​trúc định tuyến của mình, tạo điều kiện phát triển các cơ chế xử lý tuyến đường phù hợp cho các yêu cầu ứng dụng cụ thể của bạn.

Xử lý định tuyến trong ứng dụng React

React vốn không đưa ra giải pháp quản lý điều hướng trong ứng dụng; tuy nhiên, React Router được thiết kế đặc biệt để giải quyết nhu cầu này bằng cách cung cấp một bộ toàn diện các thành phần và chức năng định tuyến nhằm tạo điều kiện thuận lợi cho việc tạo ra các giao diện trực quan và có độ phản hồi cao. Bằng cách sử dụng các tính năng này, nhà phát triển có thể xây dựng các ứng dụng có khả năng điều hướng liền mạch đồng thời đảm bảo trải nghiệm người dùng tối ưu.