Giới thiệu

Trong bài viết này, chúng ta sẽ khám phá cách thực hiện định tuyến an toàn kiểu trong React bằng cách sử dụng ít mã hơn. Lợi ích của việc này không chỉ giúp mã nguồn trở nên sạch sẽ hơn mà còn nâng cao tính chính xác trong việc xử lý các tham số URL.

Định tuyến an toàn kiểu trong React

Chúng ta sẽ bắt đầu với một ví dụ về định tuyến trong React. Một trong những tính năng nổi bật của cách tiếp cận này là hàm định tuyến ba ngôi withRoute(routePattern, x, y), hoạt động tương tự như toán tử điều kiện ba ngôi matchesRoutePattern ? x : y. Cách này có thể được sử dụng với cả các thành phần và giá trị thuộc tính.

Ví dụ đơn giản về định tuyến

<nav className={withRoute('/', 'full', 'compact')}>

{withRoute('/', <Intro/>)}
{withRoute(/^\/sections\/(?<id>\d+)\/?$/, ({params}) => (
  <Section id={params.id}/>
))}

Trong đoạn mã trên, kiểu của params có dạng tổng quát là Record<string, string | undefined>, tức là một đối tượng chứa các phần chuỗi của URL. Điều này đủ cho nhiều trường hợp, nhưng đôi khi chúng ta cần kiểu chính xác hơn. Chẳng hạn, trong đoạn mã trên, params.id khớp với mẫu \d+, vì vậy nó có thể là một số thực sự thay vì một chuỗi.

Định nghĩa cấu trúc URL

Cách tiếp cận được thảo luận cho phép chúng ta áp dụng dần dần kiểu định tuyến nghiêm ngặt bằng cách định nghĩa các lược đồ URL từng phần, từ một thành phần đơn lẻ đến toàn bộ ứng dụng. Hãy cùng định nghĩa một lược đồ URL cho ví dụ của chúng ta để đảm bảo rằng params.id được gán kiểu là số và URL gốc không chấp nhận bất kỳ tham số nào:

import {A, useRoute} from '@t8/react-router';
import {createURLSchema} from 'url-shape';
import {z} from 'zod';

const {url} = createURLSchema({
  '/': null, // không có tham số
  '/sections/:id': {
    params: z.object({
      id: z.coerce.number(),
    }),
  },
});

let App = () => {
  let {withRoute} = useRoute();

  return (
    <>
      <nav className={withRoute(url('/'), 'full', 'compact')}>
        <A href={url('/')}>
          Giới thiệu
        </A>{' '}
        <A href={url('/sections/:id', {params: {id: 1}})}>
          Section 1
        </A>
      </nav>
      {withRoute(url('/'), <Intro/>)}
      {withRoute(url('/sections/:id'), ({params}) => (
        <Section id={params.id}/>
      ))}
    </>
  );
};

Chi tiết về hàm withRoute

Lưu ý rằng các hình dạng của các thành phần và hàm định tuyến withRoute() vẫn như cũ. Những gì đã thay đổi bên trong thành phần là các mẫu URL dạng chuỗi và RegExp đã được thay thế bằng trình xây dựng URL có kiểu url(). Việc sử dụng các mẫu định tuyến có kiểu này giúp params.id được giải quyết là một số, và các hình dạng định tuyến tuân thủ theo lược đồ URL được hỗ trợ bởi zod. (Di chuột qua params và id trong ví dụ hộp cát để thấy các kiểu này).

Thiết lập định tuyến an toàn kiểu cho toàn bộ ứng dụng

Mặc dù không phải là yêu cầu, chúng ta có thể muốn bao phủ toàn bộ ứng dụng với các định tuyến an toàn kiểu. Khi đã thực hiện điều này, chúng ta có thể muốn cấm các URL và mẫu URL dạng chuỗi và RegExp được tạo ra bên ngoài trình xây dựng URL (hàm url()) để tăng cường việc định tuyến an toàn kiểu. Điều này có thể được thực hiện bằng cách ghi đè cấu hình kiểu của router trong mã của ứng dụng:

declare module '@t8/react-router' {
  interface Config {
    strict: true;
  }
}

Lợi ích của định tuyến an toàn kiểu

Dù cài đặt này là tùy chọn, lược đồ URL không cần phải được định nghĩa ở một nơi duy nhất; có thể có nhiều lược đồ URL từng phần đại diện cho các phần nhất định của ứng dụng. Cách tiếp cận dần dần này đối với định tuyến an toàn kiểu, từ một lược đồ URL từng phần đến tính an toàn kiểu nghiêm ngặt cho toàn bộ ứng dụng, giúp dễ dàng áp dụng và duy trì mà không làm giảm tính ngắn gọn của mã định tuyến.

Các thực tiễn tốt nhất

• Định nghĩa rõ ràng các mẫu URL: Hãy chắc chắn rằng các mẫu URL được định nghĩa rõ ràng và dễ hiểu để giảm thiểu nhầm lẫn.
• Sử dụng các thư viện kiểm tra kiểu: Sử dụng các thư viện như zod giúp kiểm tra và xác thực kiểu dữ liệu một cách hiệu quả.

Các cạm bẫy thường gặp

• Quá phức tạp hóa định tuyến: Đôi khi, việc cố gắng áp dụng quá nhiều kiểu có thể dẫn đến mã phức tạp hơn. Hãy giữ cho mã đơn giản và dễ hiểu.

Mẹo hiệu suất

• Giảm thiểu số lần gọi hàm: Hãy chắc chắn rằng các thành phần không gọi withRoute quá nhiều lần, điều này có thể gây ảnh hưởng đến hiệu suất.

Giải quyết sự cố

• Kiểm tra kiểu dữ liệu: Nếu bạn gặp lỗi về kiểu dữ liệu, hãy kiểm tra kỹ lưỡng các mẫu URL và các tham số mà bạn đã định nghĩa.

Kết luận

Trong bài viết này, chúng ta đã cùng nhau tìm hiểu cách thiết lập định tuyến an toàn kiểu trong React với ít mã hơn. Hy vọng rằng các bạn có thể áp dụng kiến thức này vào dự án của mình. Đừng quên theo dõi để nhận thêm nhiều bài viết thú vị về lập trình!

Câu hỏi thường gặp (FAQ)

1. Định tuyến an toàn kiểu là gì?

Định tuyến an toàn kiểu là một phương pháp để đảm bảo rằng các tham số URL được gán kiểu chính xác, giảm thiểu lỗi trong ứng dụng.

2. Tôi có thể sử dụng thư viện nào để hỗ trợ định tuyến trong React?

Bạn có thể sử dụng các thư viện như @t8/react-router và zod để giúp bạn trong việc định tuyến và kiểm tra kiểu dữ liệu.