จะส่งผ่าน params ด้วย history.push / Link / Redirect ใน react-router v4 ได้อย่างไร

เราจะส่งพารามิเตอร์ด้วย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');
          });

ก่อนอื่นคุณไม่จำเป็นต้องทำvar r = this;เช่นนี้ในการif statementอ้างถึงบริบทของการโทรกลับตัวเองซึ่งเนื่องจากคุณกำลังใช้ฟังก์ชั่นลูกศรหมายถึงบริบทองค์ประกอบการตอบสนอง

ตามเอกสาร:

วัตถุประวัติมักจะมีคุณสมบัติและวิธีการดังต่อไปนี้:

• length - (number) จำนวนรายการใน stack history
• การกระทำ - (สตริง) การกระทำปัจจุบัน (PUSH, REPLACE หรือ POP)

• ตำแหน่ง - (วัตถุ) ตำแหน่งปัจจุบัน อาจมีคุณสมบัติดังต่อไปนี้:

  • ชื่อพา ธ - (สตริง) เส้นทางของ URL
  • search - (สตริง) สตริงการสืบค้น URL
  • hash - (สตริง) ส่วนแฮช URL
  • state - (สตริง) สถานะเฉพาะตำแหน่งที่จัดไว้ให้เช่น push (เส้นทาง, สถานะ) เมื่อตำแหน่งนี้ถูกส่งไปยังสแต็ก ใช้ได้เฉพาะในเบราว์เซอร์และประวัติหน่วยความจำ
• push (path, [state]) - (function) พุชรายการใหม่ไปยัง stack history
• replace (path, [state]) - (function) แทนที่รายการปัจจุบันบน stack history
• go (n) - (function) ย้ายตัวชี้ใน stack history โดย n รายการ
• goBack () - (ฟังก์ชั่น) เทียบเท่า go (-1)
• goForward () - (ฟังก์ชั่น) เทียบเท่ากับ go (1)
• block (prompt) - (function) ป้องกันการนำทาง

ดังนั้นในขณะที่นำทางคุณสามารถส่งอุปกรณ์ประกอบฉากไปยังวัตถุประวัติศาสตร์เช่น

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

หรือคล้ายกันสำหรับLinkองค์ประกอบหรือRedirectส่วนประกอบ

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

จากนั้นในองค์ประกอบที่แสดงด้วย/templateเส้นทางคุณสามารถเข้าถึงอุปกรณ์ประกอบฉากที่ส่งผ่านเช่น

this.props.location.state.detail

โปรดทราบว่าเมื่อใช้ประวัติหรือวัตถุตำแหน่งจากอุปกรณ์ประกอบฉากคุณต้องเชื่อมต่อส่วนwithRouterประกอบด้วย

ตามเอกสาร:

withRouter

คุณสามารถเข้าถึงคุณสมบัติของวัตถุประวัติและการ<Route>'sจับคู่ที่ใกล้เคียงที่สุด ผ่านwithRouterส่วนประกอบลำดับสูงกว่า withRouter จะเป็นการทำให้ส่วนประกอบของทุกครั้งที่มีการเปลี่ยนแปลงเส้นทางที่มีอุปกรณ์ประกอบฉากเช่นเดียวกับการแสดงผล<Route>props: { match, location, history }

คุณสามารถใช้ได้,

this.props.history.push("/template", { ...response }) หรือ this.props.history.push("/template", { response: response })

จากนั้นคุณสามารถเข้าถึงข้อมูลที่แยกวิเคราะห์จาก/templateส่วนประกอบโดยรหัสต่อไปนี้

const state = this.props.location.state

อ่านเพิ่มเติมเกี่ยวกับ React Session Management

• สำหรับรุ่นก่อนหน้า :

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

  และรับข้อมูลในองค์ประกอบที่เกี่ยวข้องเช่นเดียวกับด้านล่าง:

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

• สำหรับเวอร์ชั่นที่ใหม่กว่าวิธีดังกล่าวใช้งานได้ดีแต่มีวิธีการใหม่:

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

  และรับข้อมูลในองค์ประกอบที่เกี่ยวข้องเช่นเดียวกับด้านล่าง:

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

คำแนะนำ : stateชื่อคีย์ถูกใช้ในเวอร์ชันก่อนหน้าและสำหรับเวอร์ชันใหม่คุณสามารถใช้ชื่อที่กำหนดเองเพื่อส่งผ่านข้อมูลและการใช้stateชื่อนั้นไม่จำเป็น

ขยายโซลูชัน (แนะนำโดย Shubham Khatri) สำหรับใช้กับ React hooks (16.8 เป็นต้นไป):

package.json (always worth updating to latest packages)

{
     ...

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

     ...
}

การส่งพารามิเตอร์ด้วยการกดประวัติ:

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;

การเข้าถึงพารามิเตอร์ที่ส่งผ่านโดยใช้ useLocation จาก 'react-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]);

};

หากคุณต้องการส่งผ่านพารามิเตอร์ URL

มีคำอธิบายโพสต์ที่ยอดเยี่ยมโดย Tyler McGinnis บนเว็บไซต์ของเขาเชื่อมโยงไปยังโพสต์

นี่คือตัวอย่างรหัส:

1. บนองค์ประกอบ history.push:

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

2. บนส่วนประกอบเราเตอร์ที่คุณกำหนดเส้นทาง:

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

3. ในองค์ประกอบ Home:

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

ไม่จำเป็นต้องใช้กับเสื้อนอก สิ่งนี้ใช้ได้กับฉัน:

ในหน้าหลักของคุณ

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

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

จากนั้นใน ComponentA หรือ ComponentB คุณสามารถเข้าถึง

this.props.history

วัตถุรวมถึงนี้ this.props.history.push วิธี

ในการใช้React 16.8+ (withHooks)คุณสามารถใช้วิธีนี้

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>)
} 

มาที่นี่เพื่ออ่านเพิ่มเติมhttps://reacttraining.com/react-router/web/example/auth-workflow

เพิ่มข้อมูลเพื่อรับพารามิเตอร์ข้อความค้นหา

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

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับ URLSearchParams ให้ตรวจสอบลิงค์นี้ URLSearchParams