Hướng dẫn dùng react-router basename trong PHP
1. Giới thiệuNgày nay việc sử dụng SPA (Single Page Application) đã khá phổ biến so hơn trước. So với các ứng dụng SSR(Server-Side Rendering) thì một trong những ưu điểm vượt trội hơn của SPA chính là khi chúng ta làm việc với routing. Nếu như với SSR mỗi khi chúng ta chuyển trang thì trang web của chúng ta lại phải load trang, còn với SPA thì khác nó giúp ta khắc phục được điều này khi nó chỉ load một lần duy nhất. React giúp chúng ta làm việc tốt với các ứng dụng SPA, nhưng làm sao để chúng ta có thể xử lý các vấn đề liên quan đến URL thì mình xin giới thiệu với các bạn một thư viện rất phổ biến mà hầu như ai cũng sử dụng đó chính là React Router. Để sử dụng được React Router thì chúng ta cần phải cài đặt thư viện
Để bắt đầu, trước tiên chúng ta cùng cài đặt thư viện này vào project chúng ta với cú pháp
2. Tìm hiểu thuiCoi như xong bước cài đặt đơn giản như đan rổ, bây giờ chúng ta đi tìm hiểu xem React Router có gì và làm được những gì ? Có vài thành phần thường sử dụng nhất ở những
dự án đó chính là : Để sử dụng các thành phần này các bạn cần phải import vào trong code
2.1. Router ComponentTrong React Router có 2 Router component đáng chú ý đó là
Hai loại Router này có cấu trúc URL khác nhau
Thêm một sự khác biệt nữa ở đây là đối với 2.2. BrowserRouterThành phần này thường nằm ngoài cùng, bao lấy các Route khác của ứng dụng. Một
Trong đó:
2.3. RouteĐây có lẽ là phần quan trọng nhất trong React Router mà chúng ta cần phải nắm được. Hiểu đơn giản nhất là tương ứng với một URL thì nó sẽ render ra một component tương ứng mà chúng ta định nghĩa. Một Route được viết đơn giản nhất sẽ là như thế này
hoặc là có thể viết như thế này
Nghĩa là với đường dẫn là Với:
Kết quả bị chuẩn luôn
2.4. Link
Cú pháp
trong đó Ngoài ra chúng ta có thể truyền vào
Đường dẫn tương ứng sẽ là 2.5. NavLinkTương tự với
Kết quả kiểu như thế này 3. Kết luậnBài viết nào rồi cũng có hồi kết, đây là những gì mà mình muốn nói trong bài viết lần này. Hy vọng mọi người sẽ enjoy nó =)). Tài liệu tham khảo: https://reactrouter.com/web/guides/quick-start |