Cách sử dụng React Router (phần 1)

Single Page Applications (SPAs) đã cách mạng hóa việc phát triển web. Chúng mang lại trải nghiệm người dùng năng động và trôi chảy hơn so với các multi-page applications truyền thống.

Các ứng dụng web truyền thống yêu cầu tải lại toàn bộ trang cho hầu hết mọi cú nhấp chuột của người dùng. Mặt khác, các SPA tải một trang HTML duy nhất và cập nhật nội dung trang một cách linh hoạt khi người dùng tương tác với ứng dụng. Tính năng động này bắt chước cảm giác của các ứng dụng máy tính để bàn và mang lại khả năng tương tác phản hồi tốt hơn.
React Router và React Router DOM là gì?
React router là một thư viện mạnh mẽ quản lý việc điều hướng và định tuyến trong các ứng dụng React. React Router DOM được sử dụng riêng cho các ứng dụng web và có một số API dành riêng cho DOM.

Khi đi sâu vào thế giới của React Router DOM, chúng ta sẽ khám phá các khái niệm cốt lõi của nó trong khi trình diễn cách triển khai chúng trong ứng dụng React. Trọng tâm của chúng tôi sẽ là xây dựng một hệ thống điều hướng đơn giản với các liên kết đến các thành phần khác nhau, minh họa cách định cấu hình routes, xử lý khớp routes và triển khai điều hướng(navigation)

Đến cuối bài viết này, bạn sẽ hiểu rõ về cách sử dụng React Router DOM để tạo trải nghiệm điều hướng linh hoạt và liền mạch trong các ứng dụng một trang của mình.

Làm thế nào để cài đặt React Router?

Như tôi đã giải thích ở trên, React-router-DOM được sử dụng riêng để tích hợp các chức năng định tuyến vào các ứng dụng web. Vì vậy, để sử dụng nó trong ứng dụng React, bạn cần cài đặt gói Reac-router-dom bằng cách chạy lệnh này trong terminal ứng dụng React của bạn:

npm install react-router-dom

Sau khi cài đặt thành công, bây giờ bạn có thể bắt đầu routing trong dự án React của mình.

Các khái niệm cốt lõi trong React Router DOM

BrowserRouter

BrowserRouter một thành phần chính chứa tất cả các thành phần router. Tất cả các tuyến mà bạn sử dụng trong ứng dụng phải được khai báo trong BrowserRouter. Quan trọng nhất, nó lưu trữ vị trí hiện tại trong thanh địa chỉ của trình duyệt bằng cách sử dụng các URL hữu ích trong quá trình điều hướng.

Để sử dụng BrowserRouter, bạn cần nhập nó từ Reac-router-dom trong file “App.jsx” của mình.

import { BrowserRouter } from "react-router-dom";
function App() {
    return (
        < BrowserRouter >
        < /BrowserRouter >
    );
}
export default App;

BrowserRouter có thuộc tính “basename” được sử dụng để đặt URL cơ sở cho tất cả các tuyến trong ứng dụng. Điều quan trọng là ứng dụng của bạn được lưu trữ trong thư mục con trên một miền.

< BrowserRouter basename="/shop" >
< /BrowserRouter >

Việc thêm “/shop” làm “basename” sẽ đảm bảo rằng tất cả các đường dẫn route đều có liên quan đến “/shop”.

Routes

Component này là sự thay thế trực tiếp cho switch được sử dụng trong các phiên bản cũ của React Router. Nó cũng hoạt động giống như tuyến gốc và hiển thị tuyến con phù hợp đầu tiên, đảm bảo rằng component chính xác được hiển thị dựa trên URL hiện tại.
Để khai báo các routes, hãy nhập c”Thành phần này là sự thay thế trực tiếp cho switch được sử dụng trong các phiên bản cũ của React Router. Nó cũng hoạt động giống như tuyến gốc và hiển thị tuyến con phù hợp đầu tiên, đảm bảo rằng thành phần chính xác được hiển thị dựa trên URL hiện tại.

Để khai báo “routes”, hãy import “routes” từ “Reac-router-dom” và đặt nó trong “BrowserRouter” Component.

import { BrowserRouter, routes } from "react-router-dom";
function App() {
return (
    < BrowserRouter >
         < Routes >
         < /Routes >
    < /BrowserRouter >
);
}
export default App;

Route

Route là một component con bao gồm hai thuộc tính: “path” và “element”. “path” có thể là bất kỳ tên đường dẫn được chỉ định nào trong khi thuộc tính “element” là component sẽ được render. “Route” render một component cụ thể khi “path” được chỉ định khớp với URL.

Một ứng dụng có thể có bao nhiêu routes tùy thích và tất cả chúng đều phải được khai báo bên trong “Routes” components . Giả sử chúng ta có component and chúng ta sẽ phải nhập “Route” component và đặt nó trong “Routes”.

import { BrowserRouter, Routes, Route } from "react-router-dom";

//ALL COMPONENTS IMPORTS COMES HERE

function App() {

return (
    < BrowserRouter >
        < Routes >
            < Route path="/" element={} />
            < Route path="pricing" element={} />
        < /Routes >
    < /BrowserRouter >
);
}

export default App;

Routes không tồn tại

Có một cách để xử lý các Routes không tồn tại trong ứng dụng của bạn, giống như trang Lỗi 404. Để thực hiện việc này, hãy tạo một component khác mang thông báo Không tìm thấy và thêm route.

Đặt thuộc tính “path” thành “*” và chuyển component như thuộc tính “element”

import { BrowserRouter, Routes, Route } from "react-router-dom";

//ALL COMPONENTS IMPORTS COMES HERE

function App() {

    return (
        < BrowserRouter >
              < Routes >
                  < Route path="/" element={} />
                  < Route path="pricing" element={} />
                  < Route path="*" element={} />
              < /Routes >
        </ BrowserRouter >
    );
}

export default App;

Routes lồng nhau (Nested Routes)

Trong một số trường hợp, các routes có thể có các routes con hoặc các routes phụ.

import { BrowserRouter, Routes, Route } from "react-router-dom";

//ALL COMPONENTS IMPORTS COMES HERE

function App() {

return (
    < BrowserRouter >
        < Routes >
            < Route path="/" element={} />
            < Route path="pricing" element={} />
            < Route path="categories" element={} >
                < Route path="male" element={} />
                < Route path="female" element={} />

            < Route path="*" element={} />
       </ Routes >
    </ BrowserRouter >
    );
}

export default App;

Khi điều hướng đến các “elements” lồng nhau, URL trên trình duyệt sẽ có nội dung như /categories/male và /categories/female.

Link

Link hoạt động giống như một thuộc tính neo “href”. Nó có thuộc tính chỉ định nơi Liên kết sẽ đưa người dùng đến sau một cú nhấp chuột. Thông thường, đường dẫn đến trang của component sẽ được chuyển đến thuộc tính.

Các Link thường được đặt trong một component “Navbar”, vì vậy chúng tôi sẽ đặt hai Link trỏ đến đường dẫn component trong các routes đã được khai báo của chúng tôi.

import { Link } from "react-router-dom";
export default function PageNav() {
return (
    <>
        < Link to="/" >Home</ Link >
        < Link to="pricing" >Pricing</ Link >
    </>
);
}

Để biết thêm các kiến thức khác về router.Vui lòng đọc tiếp phần 2