Tìm hiểu nhanh về File-based routing - Expo Router

[NguyenAnhTuan1912]

Outline

• Giới thiệu
• Tìm hiểu trong project
• File name và các loại file
• Kết luận

Content

Giới thiệu

Expo Router là một FRAMEWORK dùng cho việc routing với React Native và Web. Cái này thì ai cũng biết rồi, nó cho phép mình chuyển từ màn hình này sang màn hình khác và sử dụng cùng một component cho nhiều nền tảng. Phương thức "file-based" này nó sẽ dựa vào trong folder app. Được dựa trên React Navigation.

Như vậy có nghĩa là mỗi khi mà mình thêm một component nào trong đó thì mình chỉ cần thêm file vào trong folder (tabs), nó sẽ tự động build cho mình. Ok, giờ thì tìm hiểu thêm thôi.

Tìm hiểu trong project

Trong project, có một dir tên là app, trong này mình có _layout.tsx, +html.tsx và +not-found.tsx. Ý nghĩa của từng file là:

• _layout.tsx: cái này nó tương tự cái App.jsx trong cấu trúc cũ của tụi mình (Root), nó quản lý các context, font và router.
• +html.tsx: nó tương tự như _layout.tsx, nhưng mà là dùng cho web.
• +not-found.tsx: là screen/page mà nếu như router không thể navigate tới route đó, thì nó sẽ chuyển về page này.
  Còn ý nghĩa của các prefix như là _ hoặc là + thì tìm hiểu sau.

Tiếp theo, trong (tabs), mình có các file như là index.tsx, explore.tsx và _layout.tsx. Ý nghĩa của từng file là:

• _layout,tsx: cái này thì khác với file ở ngoài, nó giống với mấy file HomeNavigator.jsx, ExploreNavigator.jsx ở trong ứng dụng cũ của mình, nó là root Navigator.
• index.tsx: là file đầu tiên sẽ được render ra, hoặc là file được dùng để builder nhận biết "đây là file react native component". Về sau sẽ tìm hiểu thêm.
• explore.tsx: là một screen khác nữa, nó sẽ cùng cấp với index.tsx.
  Như vậy thì mình sẽ có một output như sau:

Kết luận: cấu trúc của thư mục app này nó sẽ phản ánh đúng cấu trúc screen và navigator ở trong dự án.

File name và các loại file

File name ở trong app nó khá đặc biệt, giờ t sẽ ví dụ một cấu trúc đơn giản, mình sẽ có được cấu trúc routes như sau:

.
└── app/
    └── (tabs)/
        ├── _layout.tsx           <-- Navigator sẽ được config trong này
        ├── (explore)/
        │   ├── places.tsx        <-- /explore/places
        │   ├── place-detail.tsx  <-- /exlpore/place-detail
        │   └── index.tsx         <-- /explore
        └── index.tsx             <-- /

Note: cấu trúc thư mục ở trên sẽ phản ánh đúng cấu trúc của Route (dynamic routing, đọc thêm ở trong này), nên là phải đọc kĩ, đặt tên phần convention cho đúng. Nói thêm về _layout.tsx, thì nó có hai ý nghĩa: làm layout và để làm navigator. Còn với RootLayout thì mình có thể dùng một số ui component toàn cục.

Trong trường hợp mà place-detail có thể thấy được ở trong Home, thì mình sẽ phải chuyển place-details ra bên ngoài, cùng cấp tới (tabs). Nghĩa là mình chỉ cần config tên ở trong _layout.tsx, mình không cần phải import nó vào nữa.

(explore): có nghĩa là một group các screen mà trong đó có có layout, group này tên là explore. Nên group (tabs) mình có thể đặt tên khác miễn sao là mình để đúng tên, để mà không bị 404.

Kết luận

Có một số kết luận như sau:

• Dynamic routing: khá hay, mình chỉ cần tạo file đúng theo cấu trúc thư mục và chuẩn tên thư mục và tên file, thì nó sẽ tự động thêm cho mình, ngoài ra thì cũng phải config ở trong _layout.tsx.
• Stack và Tab thì không có gì khác so với trước.
• Cấu trúc mới khá rõ ràng với tường minh, phù hợp với cấu trúc đã bàn luận trước đó.