如何在 React Router v4 中将自定义 Props 传递给子组件？

如何将自定义 Props 传递给 React Router v4 中的子组件

问题：

在 React Router v4 中，尝试通过 this.props.route 访问路由 props 将返回未定义。子组件无法接收父组件传递过来的自定义 props。

示例代码：

<code class="javascript">// Parent Component
render() {
  return (
    <Router>
      <div>
        <Switch>
          <Route path="/" exact test="hi" component={Home} />
          <Route path="/progress" test="hi" component={Progress} />
          <Route path="/test" test="hi" component={Test} />
        </Switch>
      </div>
    </Router>
  );
}

// Child Component
render() {
  console.log(this.props); // Returns {match: {...}, location: {...}, history: {...}, staticContext: undefined}
}</code>

解决方案：

要将自定义道具传递给子组件，请使用渲染道具来定义与路由内联的组件：

<code class="javascript">// Parent Component
render() {
  return (
    <Router>
      <div>
        <Switch>
          <Route path="/" exact render={(props) => <Home test="hi" {...props} />} />
          <Route path="/progress" render={(props) => <Progress test="hi" {...props} />} />
          <Route path="/test" render={(props) => <Test test="hi" {...props} />} />
        </Switch>
      </div>
    </Router>
  );
}</code>

在子组件中，按如下方式访问自定义道具：

<code class="javascript">render() {
  console.log(this.props.test); // Returns "hi"
}</code>

注意： 确保将 {...props} 传递给子组件以保留对默认路由器 props 的访问（例如，匹配、位置、历史记录）。

以上是如何在 React Router v4 中将自定义 Props 传递给子组件？的详细内容。更多信息请关注PHP中文网其他相关文章！