React Router v4의 하위 구성 요소에 사용자 정의 소품을 전달하는 방법은 무엇입니까?

React Router v4의 하위 구성 요소에 사용자 정의 Prop을 전달하는 방법

문제:

React Router v4에서 this.props.route를 통해 경로 소품에 액세스하면 정의되지 않은 값이 반환됩니다. 하위 구성요소는 상위 구성요소에서 전달된 사용자 정의 prop을 받을 수 없습니다.

예제 코드:

<code class="javascript">// Parent Component
render() {
  return (
    <Router>
      <div>
        <Switch>
          <Route path="/" exact test="hi" component={Home} />
          <Route path="/progress" test="hi" component={Progress} />
          <Route path="/test" test="hi" component={Test} />
        </Switch>
      </div>
    </Router>
  );
}

// Child Component
render() {
  console.log(this.props); // Returns {match: {...}, location: {...}, history: {...}, staticContext: undefined}
}</code>

해결책:

사용자 정의 prop을 하위 구성 요소에 전달하려면 렌더링 prop을 사용하여 경로와 함께 구성 요소 인라인을 정의합니다.

<code class="javascript">// Parent Component
render() {
  return (
    <Router>
      <div>
        <Switch>
          <Route path="/" exact render={(props) => <Home test="hi" {...props} />} />
          <Route path="/progress" render={(props) => <Progress test="hi" {...props} />} />
          <Route path="/test" render={(props) => <Test test="hi" {...props} />} />
        </Switch>
      </div>
    </Router>
  );
}</code>

하위 구성 요소에서 다음과 같이 사용자 정의 prop에 액세스합니다.

<code class="javascript">render() {
  console.log(this.props.test); // Returns "hi"
}</code>

참고: 기본 라우터 속성(예: 일치, 위치, 기록)에 대한 액세스를 유지하려면 {...props}가 하위 구성 요소에 전달되는지 확인하세요.

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