Đã giải quyết: phản ứng liên kết bộ định tuyến không hoạt động

Vấn đề chính liên quan đến React Router Link là nó không cập nhật đúng lịch sử của trình duyệt khi được nhấp. Điều này có nghĩa là nếu người dùng nhấp vào Liên kết và sau đó nhấn nút quay lại, họ sẽ được đưa trở lại trang trước đó thay vì trang mà họ vừa điều hướng. Ngoài ra, điều này có thể gây ra hành vi không mong muốn trong một số trường hợp, chẳng hạn như khi sử dụng chuỗi truy vấn hoặc phân đoạn băm.

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

<Router>
  <div>
    <Link to="/">Home</Link>
    <Link to="/about">About</Link>

    <Route exact path="/" component={Home} />
    <Route path="/about" component={About} />
  </div>
</Router>

1. nhập { BrowserRouter làm Bộ định tuyến, Tuyến đường, Liên kết } từ “Reac-router-dom”;
// Dòng này nhập các thành phần BrowserRouter, Route và Link từ thư viện Reac-router-dom.

2.
// Dòng này tạo một thành phần Bộ định tuyến sẽ được sử dụng để tạo các tuyến cho ứng dụng của chúng tôi.

3.

// Điều này đóng phần tử div của chúng tôi chứa tất cả các tuyến đường và liên kết của chúng tôi

Liên kết v6

Liên kết v6 là một thành phần mới trong Bộ định tuyến React cung cấp giải pháp điều hướng có thể khai báo, có thể truy cập cho các ứng dụng React. Nó thay thế thành phần Liên kết trước đó và cung cấp nhiều tính năng hơn cũng như hỗ trợ tốt hơn cho khả năng truy cập. Liên kết v6 hỗ trợ cả liên kết thông thường cũng như định tuyến động, cho phép nhà phát triển tạo trải nghiệm điều hướng mạnh mẽ mà không phải quản lý tuyến đường theo cách thủ công hoặc sử dụng thư viện của bên thứ ba. Nó cũng hỗ trợ hiển thị phía máy chủ, cho phép các nhà phát triển tạo các ứng dụng thân thiện với SEO với nỗ lực tối thiểu. Cuối cùng, Link v6 có hỗ trợ tích hợp để theo dõi phân tích, giúp theo dõi tương tác của người dùng với ứng dụng của bạn dễ dàng hơn.

Tại sao React Router Link không hoạt động

Có một số lý do có thể khiến React Router Link không hoạt động trong React Router. Lý do phổ biến nhất là thành phần được liên kết đến không được định cấu hình hoặc thiết lập đúng cách. Ví dụ: nếu thành phần được liên kết đến không được nhập chính xác hoặc nếu đường dẫn tuyến đường không chính xác thì React Router Link sẽ không hoạt động. Ngoài ra, nếu có bất kỳ lỗi chính tả nào trong đường dẫn tuyến đường hoặc tên thành phần, điều này cũng có thể gây ra sự cố với React Router Link. Cuối cùng, nếu có bất kỳ xung đột nào giữa nhiều tuyến đường (chẳng hạn như hai tuyến đường có cùng đường dẫn chính xác), điều này cũng có thể gây ra sự cố với React Router Link.