如何在 React Router 的連結中將 Props 傳遞給目標元件？

在 Link React-Router 中傳遞 Props

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