Làm cách nào để vượt qua params với history.push / Link / Redirect trong Reac-router v4?

Làm thế nào chúng ta có thể truyền tham số với this.props.history.push('/page')React-Router v4?

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

Trước hết, bạn không cần phải làm var r = this;điều này trong if statementđề cập đến bối cảnh của chính cuộc gọi lại mà vì bạn đang sử dụng chức năng mũi tên đề cập đến bối cảnh thành phần React.

Theo các tài liệu:

đối tượng lịch sử thường có các thuộc tính và phương thức sau:

• độ dài - (số) Số lượng mục trong ngăn xếp lịch sử
• 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 tính chất sau:

  • tên đường dẫn - (chuỗi) Đường dẫn của URL
  • tìm kiếm - (chuỗi) Chuỗi truy vấn URL
  • hàm băm - (chuỗi) Đoạn băm URL
  • trạng thái - (chuỗi) trạng thái cụ thể theo vị trí được cung cấp để 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ó sẵn trong lịch sử trình duyệt và bộ nhớ.
• đẩy (đường dẫn, [trạng thái]) - (chức năng) Đẩy một mục mới vào ngăn xếp lịch sử
• thay thế (đường dẫn, [trạng thái]) - (chức năng) Thay thế mục nhập hiện tại trên ngăn xếp lịch sử
• go (n) - (function) Di chuyển con trỏ trong ngăn xếp lịch sử theo n mục
• goBack () - (chức năng) Tương đương để đi (-1)
• goForward () - (chức năng) Tương đương để đi (1)
• chặn (dấu nhắc) - (chức năng) Ngăn chặn điều hướng

Vì vậy, trong khi điều hướng, bạn có thể truyền đạo cụ cho đố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 Linkthành phần hoặc Redirectthành phần

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

và sau đó trong thành phần được kết xuất với /templatetuyến đường, bạn có thể truy cập các đạo cụ được truyền như

this.props.location.state.detail

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

Theo Tài liệu:

với đồ trang sức

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

bạn có thể dùng,

this.props.history.push("/template", { ...response }) hoặc là this.props.history.push("/template", { response: response })

sau đó bạn có thể truy cập dữ liệu được phân tích cú pháp từ /templatethành phần bằng mã sau đây,

const state = this.props.location.state

Tìm hiểu thêm về Quản lý lịch sử phiên React

• Đối với các phiên bản trước :

  history.push('/path', yourData);

  Và lấy dữ liệu trong thành phần liên quan như dưới đây:

  this.props.location.state // it is equal to yourData

• Đối với các phiên bản mới hơn , cách trên hoạt động tốt nhưng có một cách mới:

  history.push({
    pathname: '/path',
    customNameData: yourData,
  });

  Và lấy dữ liệu trong thành phần liên quan như dưới đây:

  this.props.location.customNameData // it is equal to yourData

Gợi ý : statetên khóa đã được sử dụng trong các phiên bản trước và đối với các phiên bản mới hơn, bạn có thể sử dụng tên tùy chỉnh của mình để truyền dữ liệu và sử dụng statetên là không cần thiết.

Mở rộng giải pháp (được đề xuất bởi Shubham Khatri) để sử dụng với móc React (16.8 trở đi):

package.json (always worth updating to latest packages)

{
     ...

     "react": "^16.12.0",
     "react-router-dom": "^5.1.2",

     ...
}

Truyền tham số với đẩy lịch sử:

import { useHistory } from "react-router-dom";

const FirstPage = props => {
    let history = useHistory();

    const someEventHandler = event => {
       history.push({
           pathname: '/secondpage',
           search: '?query=abc',
           state: { detail: 'some_value' }
       });
    };

};

export default FirstPage;

Truy cập tham số đã truyền bằng cách sử dụngLocation từ 'Reac-router-dom':

import { useEffect } from "react";
import { useLocation } from "react-router-dom";

const SecondPage = props => {
    const location = useLocation();

    useEffect(() => {
       console.log(location.pathname); // result: '/secondpage'
       console.log(location.search); // result: '?query=abc'
       console.log(location.state.detail); // result: 'some_value'
    }, [location]);

};

Nếu bạn cần vượt qua thông số URL

Có một lời giải thích bài viết tuyệt vời của Tyler McGinnis trên trang web của mình, Liên kết đến bài viết

đây là ví dụ mã:

1. trên thành phần history.push:

   this.props.history.push(`/home:${this.state.userID}`)

2. trên thành phần bộ định tuyến bạn xác định tuyến đường:

   <Route path='/home:myKey' component={Home} />

3. trên thành phần Home:

componentDidMount(){
    const { myKey } = this.props.match.params
    console.log(myKey )
}

Không cần thiết phải sử dụng vớiRouter. Điều này làm việc cho tôi:

Trong trang cha mẹ của bạn,

<BrowserRouter>
   <Switch>
        <Route path="/routeA" render={(props)=> (
          <ComponentA {...props} propDummy={50} />
        )} />

        <Route path="/routeB" render={(props)=> (
          <ComponentB {...props} propWhatever={100} />
          )} /> 
      </Switch>
</BrowserRouter>

Sau đó, trong Thành phần hoặc Thành phần, bạn có thể truy cập

this .props.history

đối tượng, bao gồm phương thức this.props.history.push.

Để sử dụng React 16.8+ (withHooks), bạn có thể sử dụng cách này

import React from 'react';
import { useHistory } from 'react-router-dom';

export default function SomeFunctionalComponent() {
let history = useHistory(); // should be called inside react component

const handleClickButton = () => {    
"funcionAPICALL"
       .then(response => {
             if (response.status >= 200 && response.status < 300) {
                 history.push('/template');
              });
}

return ( <div> Some component stuff 
    <p>To make API POST request and redirect to "/template" click a button API CALL</p>
    <button onClick={handleClickButton}>API CALL<button>
</div>)
} 

Nguồn tại đây để đọc thêm https://reacttraining.com/react-router/web/example/auth-workflow

Thêm vào thông tin để có được tham số truy vấn.

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

Để biết thêm thông tin về URLSearchParams, hãy kiểm tra liên kết này URLSearchParams