React Router v4 でカスタム Props を子コンポーネントに渡す方法は?

React Router v4 で子コンポーネントにカスタム Props を渡す方法

問題:

React Router v4 で、 this.props.route を介してルート props にアクセスすると、未定義が返されます。子コンポーネントは、親コンポーネントから渡されたカスタム props を受け取ることができません。

コード例:

<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>

解決策:

カスタム プロパティを子コンポーネントに渡すには、レンダー プロパティを使用してルートとインラインでコンポーネントを定義します:

<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>

子コンポーネントで、次のようにカスタム プロパティにアクセスします:

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

注: デフォルトのルータープロパティ (一致、場所、履歴など) へのアクセスを保持するために、{...props} が子コンポーネントに渡されていることを確認してください。

以上がReact Router v4 でカスタム Props を子コンポーネントに渡す方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。