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

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

우선, 화살표 기능을 사용하기 때문에 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 }합니다.

당신이 사용할 수있는,

this.props.history.push("/template", { ...response }) 또는 this.props.history.push("/template", { response: response })

/template다음 코드를 통해 구성 요소 에서 구문 분석 된 데이터에 액세스 할 수 있습니다.

const state = this.props.location.state

React Session History 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것이 중요하지는 않습니다.

React 후크와 함께 사용하기 위해 솔루션 확장 (Shubham Khatri에서 제안) : 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;

'react-router-dom'에서 useLocation을 사용하여 전달 된 매개 변수에 액세스 :

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. 홈 컴포넌트에서 :

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