Đã giải quyết: Sử dụng ứng dụng History React Router v6

Vấn đề chính liên quan đến việc sử dụng History React Router v6 là nó không hỗ trợ định tuyến dựa trên hàm băm. Điều này có nghĩa là tất cả các URL phải là đường dẫn tuyệt đối, điều này có thể gây khó khăn cho việc quản lý và duy trì ứng dụng. Ngoài ra, không có hỗ trợ tích hợp sẵn cho các định tuyến động, đây có thể là vấn đề khi tạo các ứng dụng phức tạp có nhiều trang. Cuối cùng, History React Router v6 không cung cấp bất kỳ hỗ trợ nào cho kết xuất phía máy chủ, điều này có thể cần thiết trong một số trường hợp.

import {
  BrowserRouter as Router,
  Switch,
  Route,
  useHistory,
} from "react-router-dom";

 function App() {

   const history = useHistory();

   // Handle a button click to push a new entry onto the history stack.
   function handleClick() {
     history.push("/new-location");
   }

   return (
     <div>      
       <button type="button" onClick={handleClick}>Go to New Location</button>       

       <Switch>        
         <Route path="/new-location">          
           <NewLocation />        
         </Route>      

       </Switch>    

     </div>   ); }

// Mã này nhập các thành phần BrowserRouter, Switch, Route và useHistory từ thư viện Reac-router-dom.
// Sau đó, nó tạo một hàm gọi là Ứng dụng sử dụng hook useHistory để tạo một đối tượng lịch sử.
// Đối tượng lịch sử này được sử dụng trong một hàm gọi là handleClick để đẩy một mục nhập mới vào ngăn xếp lịch sử khi nó được gọi.
// Hàm Ứng dụng sau đó trả về một số JSX bao gồm một nút có trình xử lý onClick gọi handleClick khi được nhấp.
// Cuối cùng, có một thành phần Switch với một thành phần Route bên trong nó, nó sẽ hiển thị thành phần NewLocation khi đường dẫn của nó khớp với “/new-location”.

lịch sử sử dụng là gì

useHistory là một React Hook được cung cấp bởi React Router, cho phép các thành phần truy cập vào đối tượng lịch sử để điều hướng theo chương trình. Nó có thể được sử dụng để đẩy các vị trí mới vào ngăn xếp lịch sử, thay thế vị trí hiện tại, quay lại trong lịch sử, v.v.

Làm cách nào để lấy lịch sử tuyến đường trong phản ứng

Trong React Router, bạn có thể lấy lịch sử route bằng cách sử dụng hook useHistory. Móc này cấp quyền truy cập vào phiên bản lịch sử mà bạn có thể sử dụng để điều hướng, tới lui trong lịch sử của ứng dụng, v.v. Để sử dụng nó, chỉ cần nhập hook từ React Router và sau đó gọi nó trong thành phần của bạn:

nhập {useHistory} từ 'Reac-router-dom';

const MyComponent = () => {
lịch sử const = useHistory();

// Bây giờ bạn có thể truy cập lịch sử tuyến đường thông qua đối tượng `history`.

trở lại (…);
}

Bộ định tuyến phản ứng có sử dụng API lịch sử không

Có, React Router sử dụng HTML5 History API để theo dõi vị trí hiện tại và lịch sử của nó. Điều này cho phép React Router cập nhật trang mà không phải tải lại, giúp điều hướng nhanh hơn và mượt mà hơn. API Lịch sử cũng cho phép liên kết sâu, giúp người dùng dễ dàng chia sẻ các liên kết đưa họ trực tiếp đến một trang cụ thể trong ứng dụng.