React Router のリンクでターゲット コンポーネントに Props を渡すにはどうすればよいですか?

Link React-Router でプロパティを渡す

React-Router の Link コンポーネントを使用すると、ターゲット コンポーネントにプロパティを渡すことができます。ただし、データ転送を容易にするために適切なルート構成を確保することが重要です。

この問題は、ルート パスが意図したプロパティの取得と一致しない場合に発生します。提供されたコードでは、ターゲット コンポーネントに対応するパスがありません:

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

問題を解決し、リンク経由でプロパティを渡すには、ルート設定でパスを指定し、 のパラメータと一致していることを確認します。コンポーネント:

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

:testvalue プレースホルダー パラメーターは、 で渡されるプロパティに対応します:

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

ターゲット コンポーネントの render メソッドでプロパティにアクセスできるようになりました:

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

機能コンポーネントでフックを使用すると、次のように props にアクセスできます。

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 のリンクでターゲット コンポーネントに Props を渡すにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。