ReactJS Router - Mọi điều bạn cần biết về Router trong ReactJS

Ứ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 Router 

Thiế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:

• Bước 1: cd vào thư mục dự án của bạn tức là geeks .
• Bước 2: Để cài đặt ReactJs Router, hãy sử dụng lệnh sau:

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 Router

Các thành phần chính của ReactJs Router là:

• BrowserRouter: BrowserRouter là một triển khai bộ định tuyến sử dụng API lịch sử HTML5 (pushState, ReplaceState và sự kiện popstate) để giữ cho giao diện người dùng của bạn đồng bộ với URL. Nó là thành phần mẹ được sử dụng để lưu trữ tất cả các thành phần khác.
• Route: Route là thành phần được hiển thị có điều kiện hiển thị một số giao diện người dùng khi đường dẫn của nó khớp với URL hiện tại.
• Link: Link component được sử dụng để tạo liên kết đến các tuyến đường khác nhau và triển khai điều hướng xung quanh ứng dụng. Nó hoạt động giống như thẻ liên kết HTML .
• Switch: Switch component chỉ được sử dụng để hiển thị route đầu tiên phù hợp với vị trí thay vì hiển thị tất cả các tuyến đường phù hợp. Mặc dù không có chức năng thách thức nào của thẻ SWITCH trong ứng dụng được thực hiện tại đây vì không có đường dẫn LINK nào trùng khớp. Nhưng giả sử chúng ta có một route (Lưu ý rằng không có CHÍNH XÁC ở đây), sau đó tất cả các thẻ Route sẽ được xử lý bắt đầu bằng '/' (tất cả các Route đều bắt đầu bằng /). Đây là nơi chúng ta cần câu lệnh SWITCH để xử lý chỉ một trong các câu lệnh.

Để 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:

• BrowserRouter: Thêm bí danh BrowserRouter làm Bộ định tuyến vào tệp app.js của bạn để bao bọc tất cả các thành phần khác. BrowserRouter là một thành phần mẹ và chỉ có thể có một thành phần con duy nhất.

  class App extends Component {
  
    render() {
  
      return (
  
         <Router>
  
             <div className="App">
  
             </div>
  
         </Router>
  
     );
  
    }
  
  }

• Link: Bây giờ chúng ta hãy tạo liên kết đến các thành phần của chúng ta. Thành phần liên kết sử dụng to prop để mô tả vị trí mà các liên kết sẽ điều hướng đến.

<div className="App">

    <ul>

      <li>

        <Link to="/">Home</Link>

      </li>

      <li>

        <Link to="/about">About Us</Link>

      </li>

      <li>

        <Link to="/contact">Contact Us</Link>

      </li>

    </ul>

</div>

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

• 1.exact: Nó được sử dụng để khớp giá trị chính xác với URL. Đối với ví dụ: chính xác đường dẫn = '/ about' sẽ chỉ hiển thị thành phần nếu nó khớp chính xác với đường dẫn nhưng nếu chúng ta xóa chính xác khỏi cú pháp, thì giao diện người dùng sẽ vẫn được hiển thị ngay cả khi cấu trúc giống như / about / 10.
• 2. path: Path chỉ định tên đường dẫn mà chúng tôi gán cho thành phần của mình.
• 3. component: Nó đề cập đến thành phần sẽ hiển thị khi khớp với đường dẫn.

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.