如何使用 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中文網其他相關文章！