Làm thế nào để vượt qua params với history.push trong phản ứng-router v4?

Question

Làm cách nào để chúng tôi có thể chuyển tham số với this.props.history.push('/page') trong React-Router v4?

.then(response => { 
     var r = this; 
     if (response.status >= 200 && response.status < 300) { 
      r.props.history.push('/template'); 
      }); 

Answer 1

Trước hết, bạn không cần phải làm var r = this; như thế này trong if statement đề cập đến bối cảnh của callback chính nó mà kể từ khi bạn đang sử dụng chức năng mũi tên dùng để chỉ Phản ứng bối cảnh phần.

Theo các tài liệu:

vật lịch sử thường có các thuộc tính và phương pháp sau đây:

• dài - (số) Số lượng các mục trong lịch sử chồng
• hành động - (chuỗi) Hành động hiện tại (PUSH, REPLACE hoặc POP)

• vị trí - (đối tượng) Vị trí hiện tại. Có thể có các thuộc tính sau:

  • tên đường dẫn - (string) Đường dẫn của URL
  • tìm kiếm - chuỗi (string) Các truy vấn URL
  • băm - (string) URL băm mảnh
  • nhà nước - (chuỗi) trạng thái vị trí cụ thể đã được cung cấp cho ví dụ đẩy (đường dẫn, trạng thái) khi vị trí này được đẩy lên ngăn xếp . Chỉ có trong lịch sử trình duyệt và bộ nhớ.
• push (đường dẫn, [nhà nước]) - (chức năng) Đẩy một mục mới vào lịch sử chồng
• thay thế (đường dẫn, [nhà nước]) - (chức năng) Thay thế các mục nhập hiện hành về lịch sử chồng
• đi (n) - (chức năng) di chuyển con trỏ trong lịch sử ngăn xếp bởi n mục
• GoBack() - (chức năng) Tương đương với đi (-1)
• goForward() - (chức năng) Tương đương với đi (1)
• khối (nhắc) - (chức năng) Ngăn điều hướng

Vì vậy, trong khi điều hướng, bạn có thể vượt qua đạo cụ vượt qua đến đối tượng lịch sử như

this.props.history.push({ 
    pathname: '/template', 
    search: '?query=abc', 
    state: { detail: response.data } 
}) 

hoặc tương tự cho các thành phần liên kết

<Link to={{ 
     pathname: '/template', 
     search: '?query=abc', 
     state: { detail: response.data } 
    }}> My Link </Link> 

và sau đó trong thành phần đó được trả lại với /template tuyến đường, bạn có thể truy cập các đạo cụ được truyền như

this.props.location.state.detail 

Cũng nên nhớ rằng, khi sử dụng các đối tượng lịch sử hoặc vị trí từ đạo cụ, bạn cần kết nối thành phần với withRouter.

Theo Documents:

withRouter

Bạn có thể nhận được quyền truy cập vào thuộc tính của đối tượng lịch sử và gần nhất <Route>'s trận đấu thông qua các thành phần withRouter bậc cao. withRouter sẽ hiển thị lại thành phần mỗi khi tuyến đường thay đổi với cùng đạo cụ như <Route> làm cho props: { match, location, history }.

Answer 2

Thêm thông tin để nhận tham số truy vấn.

const queryParams = new URLSearchParams(this.props.location.search); 
console.log('assuming query param is id', queryParams.get('id'); 

Đối với thông tin thêm về URLSearchParams kiểm tra liên kết này URLSearchParams