Withrouter là gì
19/10/2021 13:27 React Router là một thư viện chuẩn để định tuyến trong React. Nó cho phép điều hướng giữa các chế độ xem của các thành phần khác nhau trong Ứng dụng React, cho phép thay đổi URL của trình duyệt và giữ giao diện người dùng đồng bộ với URL. Dưới đây là một ứng dụng đơn giản để giúp bạn hiểu rõ hơn về bộ định tuyến này!
Ứng dụng sẽ chứa ba thành phần: Home component, component và contact component. Chúng ta sẽ sử dụng React Router để điều hướng giữa các thành phần này. Hướng dẫn cài đặt React RouterThiết lập ứng dụng React: Tạo ứng dụng React bằng cách sử dụng create-react-app và gọi nó là geeks . Lưu ý: Nếu trước đây bạn đã cài đặt ứng dụng create-react-app thông qua npm, hãy sử dụng trực tiếp lệnh bên dưới: npx create-react-app geeks Môi trường phát triển của bạn đã sẵn sàng. Bây giờ chúng ta hãy cài đặt React Router trong mục Our Application. Cài đặt ReactJs Router: ReactJs Router có thể được cài đặt thông qua npm trong ứng dụng React của bạn. Làm theo các bước dưới đây để cài đặt Bộ định tuyến trong ứng dụng React của bạn:
npm install react-router-dom –save Sau khi cài đặt react-router-dom, hãy thêm các thành phần của nó vào ứng dụng React của bạn. >>> Đọc thêm: 5 kỹ năng lập trình viên cần biết trước khi học ReactJs cơ bản Thêm các thành phần ReactJs RouterCác thành phần chính của ReactJs Router là:
Để thêm các thành phần ReactJs Router trong ứng dụng của bạn, hãy mở thư mục dự án của bạn trong trình chỉnh sửa mà bạn sử dụng và truy cập tệp app.js. Bây giờ, hãy thêm mã đã cho bên dưới vào app.js. import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';Sử dụng React RouterĐể sử dụng React Router, trước tiên chúng ta hãy tạo một vài thành phần trong ứng dụng react. Trong thư mục dự án của bạn, hãy tạo một thư mục có tên là thành phần bên trong thư mục src và bây giờ thêm 3 tệp có tên home.js , about.js và contact.js vào thư mục thành phần. Bây giờ, chúng ta hãy đưa các thành phần React Router vào ứng dụng:
Bây giờ chúng ta hãy thử tìm hiểu các đạo cụ liên quan đến thành phần Router
Trên đây là một số thông tin về ReactJs Router, bạn có thể tham khảo thêm để ứng dụng vào các dự án sắp tới của mình! Bạn cũng có thể tìm hiểu thêm thông tin về ReactJs qua khóa học lập trình ReactJs của Viện công nghệ thông tin T3H. |