ReactRouter V6

Tram Ho

  1. Overview
  2. Bundles
  3. Routers
  4. Suspense
  5. Outlet
  6. Conclude

1. Overview

React route là bộ định tuyến đường dẫn đến các trang, giúp đồng bộ giao diện và Url trên những trang web của các bạn. Hiện tại React route đã phát hành những bản V6 beta, với những thay đổi và cải tiến như thế nào chúng ta cùng tìm hiểu.

2. Bundles


Với version 6 thì kích thước nhỏ hơn 62%, giúp cho tốc độ tải xuống package của bạn nhanh hơn đáng kể. Với version 6 tốc độ tải là 5ms với 4G và 80ms đối với 3G so với gói tiền nhiệm của nó v5 thì 11ms với 4G và 190ms với 3G.

  • Đây là giúp cho kích thước package.
  • Không hỗ trợ cho những phiên bản cũ hơn IE11
  • Không hỗ trợ cho React có version bé hơn 16.8
  • Sử dụng Google Closure Compiler

Và bây giờ chúng ta cùng tìm hiểu 1 vài API được nâng cấp trong V6 này nhá.

3. Routers

Thay vì sử dụng <Switch></Switch> thì sử dụng <Route path=”…”/>
Trong V5 bạn phải tạo Route cha và từ Route cha bao bọc Route con. Để Link tới Route con trong menu thì phải match Route cha và nối Route con vào.

Trong V6 Route và Link tự động kết nối tới các Route cha của nó

4. Suspense

Thay vì truy cập vào history để điều hướng route thì với V6 đã cung cấp useNavigate(), điều này rất hữu ích sau khi bạn thao tác 1 hành động nào đó chẳng hạn như submit login.

5. Outlet

Outlet giống như props children, nó sẽ tìm những components của Route con và lắp vào vị trí của nó.

Tùy vào url thì <Outlet/> trong component Profile sẽ hiện component của MyProfile hoặc OthersProfile

6. Conclude

Như vậy thì mình đã tìm hiểu sơ qua về React router V6. Với những cải thiện đáng kể về size package cũng như những tính năng ưu việt thì các bạn có mong chờ phiên bản V6 này không. Cuối cùng chúc các bạn 1 ngày làm việc hiệu quả.

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo