[reactjs] 반응 라우터 v4에서 history.push / Link / Redirect로 매개 변수를 전달하는 방법은 무엇입니까?

우선, 화살표 기능을 사용하기 때문에 React 컴포넌트 컨텍스트를 참조하는 콜백 자체의 컨텍스트를 참조 할 var r = this;때이 작업을 수행 할 필요는 없습니다 if statement.

문서에 따르면 :

history 객체는 일반적으로 다음과 같은 속성과 메서드를 갖습니다.

• length-(숫자) 히스토리 스택의 항목 수
• action-(문자열) 현재 조치 (PUSH, REPLACE 또는 POP)

• location-(객체) 현재 위치. 다음과 같은 속성이있을 수 있습니다.

  • pathname-(문자열) URL의 경로
  • search-(문자열) URL 쿼리 문자열
  • 해시-(문자열) URL 해시 조각
  • state-(문자열) 위치 별 상태. 예를 들어이 위치가 스택으로 푸시 될 때 푸시 (경로, 상태)에 제공되었습니다. 브라우저 및 메모리 기록에서만 사용할 수 있습니다.
• push (path, [state])-(function) 새 항목을 기록 스택에 넣습니다.
• replace (path, [state])-(function) 기록 스택의 현재 항목을 교체합니다
• go (n)-(함수) 히스토리 스택에서 포인터를 n 개의 항목만큼 이동합니다.
• goBack ()-(함수) go (-1)와 동일
• goForward ()-(함수) go (1)와 같습니다.
• 차단 (프롬프트)-(기능) 탐색 방지

따라서 탐색하는 동안 소품을 기록 개체에 전달할 수 있습니다.

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>

/templateroute 로 렌더링 된 컴포넌트에서 전달 된 prop에 접근 할 수 있습니다.

this.props.location.state.detail

소품에서 히스토리 또는 위치 객체를 사용할 때는 구성 요소를와 연결해야합니다 withRouter.

문서에 따라 :

라우터

고차 컴포넌트 <Route>'s를 통해 히스토리 오브젝트의 특성 및 가장 근접한 항목에 액세스 할 수 있습니다
withRouter. withRouter
render와 같은 props로 경로가 변경 될 때마다 컴포넌트를 다시 <Route>렌더링 props: { match, location, history }합니다.

답변

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;

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]);

};

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>

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