React-Router v4의 라우터 구성 요소에 사용자 정의 Prop을 전달하는 방법은 무엇입니까?

React-Router v4의 라우터 구성 요소에 사용자 정의 Prop 전달

React-Router를 사용하여 다중 페이지 React 애플리케이션으로 작업할 때 사용자 정의 Prop을 전달합니다. 개별 페이지에 대한 props는 코드의 유연성을 향상시킬 수 있습니다. 이를 통해 구성 요소 간에 맞춤형 기능과 데이터 공유가 가능해집니다.

그러나 경로를 통해 전달된 prop에 액세스하는 데 일반적으로 사용되는 this.props.route 객체가 정의되지 않은 상태를 반환하는 문제가 발생했습니다. 이 문제를 해결하려면 React-Router 문서에 따라 Route 구성 요소에서 render prop을 사용하는 것이 좋습니다.

<Route path="/" exact render={(props) => (<Home test="hi" {...props}/>)} />

이 접근 방식에서 render prop 함수는 사용자 정의를 포함하여 구성 요소 prop과 동일한 모든 prop을 받습니다. 테스트와 같은 소품. 홈 구성 요소의 prop에 액세스하려면 this.props.test를 사용하세요.

또한 render prop 함수에 {...props}를 전달해야 합니다. 이렇게 하면 위치와 같은 기본 라우터 prop이 보장됩니다. , 기록 및 일치 항목도 구성 요소로 전달됩니다.

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