React Router を使用してリンクで Props を渡すにはどうすればよいですか?

React-Router の Link に Props を渡します

を使用する場合React-Router のコンポーネントを使用すると、新しいビューにプロパティを渡すことができます。これを行うには、 の to プロパティを使用します。そして、必要なプロパティを持つオブジェクトを渡します。例:

<code class="js"><Link to={{ pathname: '/ideas', query: { testvalue: 'hello' } }}>Create Idea</Link></code>

宛先ビューでは、次のパターンを使用して、渡されたプロパティにアクセスします:

<code class="js">render() {
    console.log(this.props.match.params.testvalue, this.props.location.query.backurl)
    return <span>{testvalue} {backurl}</span>    
}</code>

注: 上記の構文は現在古くなっています。

フックを使用する更新された機能コンポーネント内:

<code class="js">const CreatedIdeaView = () => {
    const { testvalue } = useParams();
    const { query, search } = useLocation(); 
    console.log(testvalue, query.backUrl, new URLSearchParams(search).get('backUrl'))
    return <span>{testvalue} {backurl}</span>    
}</code>

さらなる考慮事項

• 宛先ルートに一致するパスが定義されていることを確認してください。渡されたプロパティを受け取ります。この例では、ルートは次のように定義する必要があります:

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

• React-Router で使用される Link コンポーネントは、最近のバージョンで更新されました。プロパティを渡すための構文は、使用されているバージョンによって異なる場合があります。

以上がReact Router を使用してリンクで Props を渡すにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。