Cách áp dụng Layout cho các pages khác nhau bằng cách sử dụng Route trong ReactJS

Tram Ho

Hướng dẫn cơ bản về Route trong ReactJS

Hôm nay tôi sẽ chia sẻ anh em cách sử dụng Layout cho các trang trong ReactJS. Tôi cũng tìm khá lâu nhưng không
có hướng dẫn cụ thể nên tôi đã từng tạo 1 component <Layout></Layout> là component cha của tất cả các component con. Cách này thật
stupid. Sau khi phát hiện <Outlet> trong <Route> tôi đã có cách giải quyết khác cho vấn đề này.

Cài đặt React Route

Cấu trúc folder trong react app

Tạo component Layout.js

Trong component Layout thêm <Outlet /> tại nơi mà bạn muốn đặt nội dung. Cái này tương tự với children trong props.

Tạo các components ví dụ

  1. Home.js

  1. Blogs.js

  1. NoPage.js

File Index.js

Chúng ta có thể thấy các trang Home, Blogs đã được thêm Layout khi đặt Route bên trong Route của Layout component.

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo