如何将自定义 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中文网其他相关文章！