Router trong React Js cho người mới

Giới thiệu về React Router

React Routerlà một thư viện được sử dụng để điều hướng giữa các trang (page) và các thành phần (component) trong ứng dụng React Js. Thư viện cung cấp cho chúng ta các công cụ để quản lý lịch sử duyệt web (browser history) và cho phép chúng ta tạo ra các đường dẫn (URLs) có ý nghĩa và tùy chỉnh cho các trang và thành phần trong ứng dụng. React Router giúp chúng ta tạo ra một trải nghiệm điều hướng trang web mượt mà và giao diện người dùng đáp ứng, giúp tăng tính tương tác và sự linh hoạt của ứng dụng.

Cú pháp của React Router Dom

React Router Dom là một phiên bản của React Router được thiết kế để hoạt động trên môi trường web. Nó cung cấp các thành phần và API để giúp chúng ta quản lý định tuyến trong ứng dụng React của mình.

Cú pháp của React Router Dom bao gồm:

  1. BrowserRouter: một component để bao bọc ứng dụng của bạn, cho phép sử dụng các đường dẫn (URLs) trong trình duyệt.

  2. Route: một component để định nghĩa một đường dẫn (URL) và kết nối đường dẫn này với một component cụ thể.

  3. Link: một component để tạo liên kết (link) đến một đường dẫn (URL).

  4. Switch: một component để chọn một Route duy nhất từ nhiều Route có thể khớp với đường dẫn hiện tại.

Các thành phần và API khác như Redirect và useHistory cũng được cung cấp bởi React Router Dom để giúp quản lý định tuyến trong ứng dụng của bạn.

Cách cài đặt và sử dụng Router trong React Js

Để sử dụng React Router trong ứng dụng của mình, ta cần cài đặt react-router-dom package bằng npm. Bạn có thể thực hiện lệnh sau trong terminal để cài đặt:

				
					npm install react-router-dom

				
			

Sau khi đã cài đặt xong, ta có thể bắt đầu sử dụng Router trong React Js. Dưới đây là một ví dụ về cách sử dụng Router trong React Js:

				
					import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';

<a href="https://nodemy.vn/tim-hieu-ve-ham-trong-javascript-cach-tao-truyen-tham-so-va-su-dung-mot-cach-hieu-qua-don-gian-de-hieu-danh-cho-nguoi-moi-bat-dau-important/">function</a> App() {
  return (
    <Router>
      <div>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/contact" component={Contact} />
        </Switch>
      </div>
    </Router>
  );
}

export default App;

				
			

Trong đoạn mã trên, chúng ta đã sử dụng BrowserRouter để bọc toàn bộ ứng dụng, tạo ra một router mới. Sau đó, ta định nghĩa các Route với các path khác nhau để định tuyến đến các trang khác nhau của ứng dụng. Switch được sử dụng để chỉ cho React Router biết chỉ chọn một Route duy nhất để hiển thị tại một thời điểm.

Với mỗi Route, ta sử dụng thuộc tính “path” để định nghĩa đường dẫn tương ứng và thuộc tính “component” để định nghĩa component sẽ được hiển thị khi đường dẫn tương ứng được truy cập.

Kết luận và bài viết có liên quan

Kết luận:React Router là một thư viện mạnh mẽ và phổ biến trong việc quản lý định tuyến trong ứng dụng React. Để sử dụng React Router, ta cần cài đặt react-router-dom package và sử dụng các component như BrowserRouter, Switch và Route để định nghĩa các đường dẫn và component tương ứng. Từ đó, ta có thể quản lý định tuyến và hiển thị các trang khác nhau trong ứng dụng của mình một cách dễ dàng và linh hoạt.
Bài viết có liên quan: Nên chọn Redux thuần hay Redux toolkitTim hiểu về function component trong React JsTìm hiểu useMemo trong React JsTìm hiểu về useCallback trong React Js

Leave a Reply

Your email address will not be published. Required fields are marked *