如何將自訂 Props 傳遞給 React Router v4 中的子元件？

在React Router v4 中使用自訂Props 擴充功能Router 元件

使用React Router 建立多頁React 應用程式時，通常需要將自訂props 傳遞給子組件。預設情況下，子元件繼承 this.props.route 對象，但這可能不會總是包含預期的 props。

問題：子元件未定義 this.props.route

問題可以在子元件中存取 this.props.route 時要觀察，它會傳回 undefined。這是因為 React Router 的預設渲染方法不支援傳遞自訂 props。

解決方案：使用 Render Prop

要傳遞自訂 props，請利用 Route 元件的 render prop。這涉及在渲染道具中內聯元件定義：

<code class="javascript"><Route path="/home" render={(props) => <Home test="hi" {...props} />} /></code>

存取子元件中的自訂道具

在子元件中，透過this.props 存取自訂道具：

<code class="javascript">console.log(this.props.test); // Outputs "hi"</code>

傳播預設路由器道具

使用渲染道具時，將預設路由器道具（位置、歷史、匹配等）傳播到子元件至關重要。這是透過在渲染屬性中包含{...props} 來實現的：

<code class="javascript"><Route path="/home" render={(props) => <Home test="hi" {...props} />} /></code>

結論

透過利用渲染屬性，您可以輕鬆地將自訂屬性傳遞給React Router 中的路由器組件v4。請記得傳播預設的 router props 以確保子元件的功能。

以上是如何將自訂 Props 傳遞給 React Router v4 中的子元件？的詳細內容。更多資訊請關注PHP中文網其他相關文章！