Expo Router là gì? Kỷ nguyên File-Based Routing trong React Native

Chúc mừng bạn đã đi được chặng đường khá dài để trở thành lập trình viên React Native chuyên nghiệp! Bạn đã biết cách xây dựng một màn hình giao diện tuyệt đẹp, biết bắt sự kiện chạm, và biết cách hiển thị hàng ngàn mục dữ liệu với FlatList.

Nhưng hãy nhìn lại các ứng dụng trên điện thoại của bạn xem. Không có ứng dụng nào chỉ có đúng một màn hình cả. Khi bạn đang ở trang Home, bạn bấm vào hình đại diện, ứng dụng phải trượt sang trang Profile. Bạn bấm vào một sản phẩm, nó phải mở ra trang Detail.

Quá trình luân chuyển giữa các màn hình này được gọi là Navigation (Điều hướng). Và trong bài này, chúng ta sẽ đón đầu xu hướng công nghệ mới nhất của lập trình Mobile bằng cách làm chủ Expo Router - một cuộc cách mạng thực sự về cách chúng ta tổ chức các màn hình.

1. Nỗi đau của "Kỷ nguyên cũ"

Trước đây, tiêu chuẩn duy nhất để chuyển trang trong React Native là dùng thư viện React Navigation. Dù rất mạnh mẽ, nhưng cách thiết lập của nó lại khiến người mới vô cùng đau đầu.

Để có được 2 màn hình Home và Profile, bạn phải tạo ra một file định tuyến (Router) khổng lồ, khai báo từng màn hình một, bọc chúng trong các thẻ NavigationContainer, Stack.Navigator, Stack.Screen... File cấu hình này thường phình to ra hàng trăm dòng code khi ứng dụng lớn lên, rất khó bảo trì và dễ sinh lỗi.

Nhưng, Expo Router đã xuất hiện và thay đổi luật chơi.

Bật mí cho bạn một bí mật: Expo Router thực chất được xây dựng DỰA TRÊN lõi của React Navigation, nhưng nó giấu đi toàn bộ những dòng code cấu hình phức tạp đó, mang lại cho bạn một trải nghiệm lập trình nhàn nhã chưa từng có.

2. File-Based Routing là gì?

Nếu bạn từng học lập trình Web hiện đại với Next.js, bạn sẽ thấy khái niệm này cực kỳ quen thuộc.

File-based routing hiểu đơn giản là: Bạn đặt tên file/thư mục như thế nào, đường dẫn (URL/Route) của màn hình sẽ y hệt như thế. Bạn không cần phải viết code khai báo màn hình ở đâu cả. Khởi tạo một file mới, và BÙM - bạn có ngay một màn hình mới!

Hãy tưởng tượng thư mục app/ trong dự án của bạn chính là một bản đồ giao thông:

• Mọi file có đuôi .tsx (hoặc .js) nằm trong thư mục app/ sẽ tự động trở thành một màn hình.
• Tên của file chính là tên của đường đi (Route).

3. Khám phá cấu trúc thư mục

Hãy cùng xem một ví dụ thực tế. Giả sử bạn tạo các file trong dự án như sơ đồ dưới đây:

📁 my-app
 └── 📁 app
      ├── 📄 index.tsx
      ├── 📄 about.tsx
      ├── 📄 profile.tsx
      └── 📁 settings
           ├── 📄 index.tsx
           └── 📄 privacy.tsx

Expo Router sẽ tự động đọc cấu trúc này và biến nó thành các đường dẫn (Routes) tương ứng trong ứng dụng:

1. app/index.tsx ➡️ Trở thành đường dẫn / (Trang chủ)
   • File có tên index luôn luôn đại diện cho thư mục chứa nó. Khi bạn mở app lên, đây là màn hình đầu tiên đập vào mắt người dùng.
2. app/about.tsx ➡️ Trở thành đường dẫn /about
   • Màn hình Giới thiệu.
3. app/profile.tsx ➡️ Trở thành đường dẫn /profile
   • Màn hình Trang cá nhân.
4. app/settings/index.tsx ➡️ Trở thành đường dẫn /settings
   • Khởi tạo màn hình cài đặt chung.
5. app/settings/privacy.tsx ➡️ Trở thành đường dẫn /settings/privacy
   • Màn hình chính sách bảo mật nằm sâu bên trong mục Cài đặt.

Quy tắc vàng: Chỉ cần nhìn vào cây thư mục của dự án, bất kỳ ai trong team cũng có thể hiểu ngay lập tức cấu trúc luồng đi của ứng dụng mà không cần phải đọc cả ngàn dòng code cấu hình. Đó chính là sự vi diệu của Expo Router!

4. Những file đặc biệt cần nhớ

Bên cạnh các file tạo màn hình thông thường, Expo Router quy định một số tên file mang "sức mạnh đặc biệt". Để tránh lỗi, bạn tuyệt đối không được đặt tên file tùy tiện trùng với chúng:

• _layout.tsx: (File Bố cục) Ký tự gạch dưới _ cho biết đây KHÔNG PHẢI là một màn hình riêng lẻ. Nó là một "cái khung" dùng để bao bọc các màn hình khác bên trong nó. Bạn sẽ dùng file này để tạo Header (Thanh tiêu đề) chung, hoặc thanh Bottom Tabs (Thanh menu dưới đáy màn hình) dùng chung cho nhiều trang. (Chúng ta sẽ thực hành file này ở Bài 11).
• [id].tsx: (Dynamic Route - Đường dẫn động) Cặp ngoặc vuông [ ] mang ý nghĩa dữ liệu biến đổi. Ví dụ, khi bạn bấm vào bài viết số 1, đường dẫn là /blog/1. Bấm vào bài số 2, đường dẫn là /blog/2. Bạn không thể tạo file cho hàng ngàn bài viết được. Bạn chỉ cần tạo một file app/blog/[id].tsx, nó sẽ tự động bắt lấy các con số đó!

5. Tại sao chắc chắn nên chọn Expo Router?

Nếu bạn vẫn đang lưỡng lự việc học Expo Router thay vì cách cũ, đây là 3 lý do sẽ thuyết phục bạn hoàn toàn:

1. Ít code hơn, ít bug hơn: Việc loại bỏ hoàn toàn các file cấu hình khổng lồ giúp dự án của bạn sạch sẽ hơn gấp 10 lần.
2. Hỗ trợ Deep Linking tự động: Deep link là tính năng khi bạn bấm vào một đường link trên Messenger/Zalo, nó sẽ tự động mở thẳng vào trang chi tiết bên trong App (thay vì mở Web). Với React Navigation cũ, việc setup Deep link là một cơn ác mộng. Với Expo Router, vì mọi thứ đã là đường dẫn URL, Deep link hoạt động ngay lập tức mà không cần bạn làm gì thêm!
3. Sẵn sàng cho tương lai: Đây là tiêu chuẩn mới do đội ngũ Expo (những người duy trì lõi React Native) định hình. Các tính năng Web và Native đang xích lại gần nhau, và File-based routing là xu hướng không thể đảo ngược.

Kết luận: Expo Router là tương lai

Bạn chỉ cần nhớ một câu chú duy nhất cho bài học này: "Trong Expo Router, Thư mục và File chính là Màn hình và Đường dẫn."

Bây giờ chúng ta đã biết cách tạo ra các màn hình chỉ bằng việc bấm New File. Nhưng hiện tại chúng vẫn là những "hòn đảo cô lập". Làm sao để khi đang ở index.tsx, người dùng bấm một nút và màn hình trượt mượt mà sang profile.tsx?

Hãy sẵn sàng bước sang bài tiếp theo, nơi chúng ta sẽ học cách lái chiếc xe luân chuyển giữa các màn hình!