React Router의 링크에서 대상 구성 요소에 Prop을 전달하는 방법은 무엇입니까?

Link React-Router의 Pass Props

React-Router의 Link 구성 요소를 사용하면 대상 구성 요소에 속성을 전달할 수 있습니다. 그러나 데이터 전송을 용이하게 하려면 적절한 경로 구성을 보장하는 것이 중요합니다.

경로 경로가 의도한 속성 검색과 일치하지 않을 때 문제가 발생합니다. 제공된 코드에서 대상 구성 요소에 해당 경로가 없습니다.

<Route name="ideas" handler={CreateIdeaView} />

문제를 해결하고 링크를 통해 속성을 전달하려면 경로 구성에서 경로를 지정하고 구성 요소:

<Route name="ideas" path="/:testvalue" handler={CreateIdeaView} />

:testvalue 자리 표시자 매개 변수는 에 전달된 속성에 해당합니다.

<Link to="ideas" params={{ testvalue: "hello" }} />

이제 대상 구성 요소의 렌더링 메서드에서 속성에 액세스할 수 있습니다.

render: function() {
  console.log(this.props.match.params.testvalue); // logs "hello"
}

기능적 구성 요소에서 후크를 사용하면 다음과 같이 prop에 액세스할 수 있습니다.

const CreatedIdeaView = () => {
  const { testvalue } = useParams();
  console.log(testvalue); // logs "hello"
}

또는 경로 매개 변수 대신 쿼리 매개 변수를 전달해야 하는 경우 다음과 같이 사용할 수 있습니다. :

<Link to={{pathname: '/ideas', query: {testvalue: "hello"}}} />

대상 구성 요소에서:

componentDidMount() {
    console.log(this.props.location.query.testvalue) // logs "hello"
}

위 내용은 React Router의 링크에서 대상 구성 요소에 Prop을 전달하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!