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

0
71

React Router là gì ?

React Router là một thư viện định tuyến được xây dụng dựa trên React được sử dụng để tạo định tuyến cho các ứng dụng React.

React router giúp chúng ta tạo ra các ứng dụng đơn trang. Có nghĩa là chúng ta sử dụng lại cùng một trang html để hiện thị lại các component khác nhau dựa trên URL.

Cài đặt React Router

React router mặc định không có sẵn trong React mà chúng ta sẽ phải cài đặt thông quan NPM.

Để cài React Router , bạn cần tải xuống package react-router-dom bằng cách chạy lệnh sau.

Thêm Router vào ứng dụng

Trước tiên để làm ví dụ về router các bạn hãy tạo cho tôi 1 project react bằng create-react-app

Đồng thời tạo cho tôi 3 component

User.js

App.js

Contact.js

Bây giờ ứng dụng của chúng ta có ba component là App, Contact, User.

Thiết lập router

Để thiết lập router các bạn mở file index.js và import 3 component đã tạo ở trên.

index.js

React Router cung cấp cho chúng ta 3 component Route, Link, BrowserRouter giúp chúng ta có thể làm việc với router.

Tiếp theo chúng ta cũng import 3 component của react-router vào index.js và thực hiện thêm router cho ứng dụng.

index.js

Trong component Route, chúng ta có 2 props

  • path: có nghĩa chúng ta cần chỉ định đường dẫn
  • component: component nào sẽ được hiện thị khi họ đi vào đường dẫn đó.

Bây giờ nếu bạn chạy http://localhost:3000/users  bạn sẽ nhìn thấy phần User được hiện thị.

Tuy nhiên, Home cũng được hiện thi ra ở màn hình, điều này xảy ra do đường dẫn home là “/” và đường dẫn users  cùng có "/" dấu gạch chéo giống nhau ở cả hai đường dẫn nên nó sẽ hiện thị cả 2 component. Để loại bỏ trường hợp này chúng ta cần thêm prop exact.

Bây giờ bạn sẽ chỉ thấy component User hiện thị trên màn hình.

Điều hướng bằng component Link

index.js

Sau khi thêm , bạn sẽ thấy các liên kết được hiên thị trên màn hình. Nếu bạn click vào Users , bạn sẽ thấy URL thay đổi và component User được hiện thị

 

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