React.js 16 – Điều hướng ứng dụng bằng react router P2

0
123

Thêm trang thông báo lỗi 404

Trang 404 là gì?

Một trang 404 được gọi là trang không tìm thấy, điều đó có nghĩa là khi người dùng điều hướng đến đường dẫn sai không có trong website, chúng ta cần hiền thị trang không tìm thấy.

Thêm 404 trong React

Để thực hiện điều này chúng ta cần một component khác gọi là Switch được cung cấp bởi react-router-dom.

Switch là component giúp chúng ta chỉ hiện thị các component khi đường dẫn khớp với các Route.

Tạo một component Notfound

Notfound.js

Cập nhật index.js

Bây giờ hãy thử nó bằng cách nhập sai đường dẫn http://localhost:3000/posts bạn sẽ thấy component Notfound hiện ra

Truyền tham số cho URL

Các tham số URL giúp chúng ta hiện thị cùng một component dựa trên URL động. Ví dụ với component User chúng ta có thể hiện thị các thông tin khác nhau dựa trên các ID khác nhau.

index.js

Bây giờ trong User.js thêm console.log(this.props)

User.js

Bây giờ mở trình duyệt của bạn lên vào nhập vào url theo địa chỉ này

http://localhost:3000/users/1 và mở console của trình duyệt bạn sẽ thấy một đối tượng params với id = 1 giống như chúng ta đã truyền vào đường dẫn.

Các bạn có thể sử dụng các tham số trên đường dẫn bằng cách sử dụng.

 

 

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây