React Router v4의 하위 구성요소에 사용자 정의 Prop을 어떻게 전달할 수 있나요?

React Router v4에서 사용자 정의 Prop을 사용하여 라우터 구성 요소 확장

React Router를 사용하여 다중 페이지 React 애플리케이션을 구성할 때 사용자 정의 Prop을 하위 구성 요소에 전달하는 것이 바람직한 경우가 많습니다. 기본적으로 하위 구성 요소는 this.props.route 개체를 상속하지만 여기에 의도한 props가 항상 포함되지 않을 수도 있습니다.

문제: 하위 구성 요소에 대해 정의되지 않은 this.props.route

이 문제는 다음과 같습니다. 정의되지 않음을 반환하는 하위 구성 요소에서 this.props.route에 액세스할 때 관찰됩니다. 이는 React Router의 기본 렌더링 방법이 사용자 정의 prop 전달을 지원하지 않기 때문입니다.

해결책: Render Prop 사용

사용자 정의 prop을 전달하려면 Route 구성 요소의 render prop을 활용하세요. 여기에는 렌더링 prop 내에서 구성 요소 정의를 인라인하는 작업이 포함됩니다.

<code class="javascript"><Route path="/home" render={(props) => <Home test="hi" {...props} />} /></code>

하위 구성 요소의 사용자 정의 Prop에 액세스

하위 구성 요소에서 this.props를 통해 사용자 정의 Prop에 액세스합니다.

<code class="javascript">console.log(this.props.test); // Outputs "hi"</code>

기본 라우터 속성 전파

렌더 속성을 사용할 때 기본 라우터 속성(위치, 기록, 일치 등)을 하위 구성 요소에 전파하는 것이 중요합니다. 이는 렌더 prop에 {...props}를 포함함으로써 달성됩니다:

<code class="javascript"><Route path="/home" render={(props) => <Home test="hi" {...props} />} /></code>

결론

render prop을 활용하면 사용자 정의 prop을 React Router의 라우터 구성 요소에 쉽게 전달할 수 있습니다. v4. 하위 구성 요소의 기능을 보장하려면 기본 라우터 속성을 전파하는 것을 잊지 마세요.

위 내용은 React Router v4의 하위 구성요소에 사용자 정의 Prop을 어떻게 전달할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!