1

我正在尝试传递我自己的自定义道具（函数、对象..等），但它们没有传递，当我尝试不带 gatsby 的 @reach/router 时，它工作正常。

我的 app.js：

      <Router basepath="">
        <Welcome path="" />
        <OtherComponent
          path="/comppath"
          myprop="prop data"
        />
      </Router>

我的 OtherComponent.js

export default function OtherComponent(props){
    return (
        <div>
            <h1>My Component</h1>
            {props.myprop}
        </div>
    );
}

组件渲染得很好，但我的道具没有通过，当我控制台日志道具时，我只得到路径、位置、pageContext 和导航方法 ..etc 但不是我的道具

旁注：我正在使用 gatsby 的 gatsby-plugin-create-client-paths

4

1 回答 1

1

使用<Link>组件（由 React 扩展@reach/router），您可以传递一个state对象，该对象可以包含您想要的任何内容。

<Link>组件确实是一个包装器，@reach/router它添加了特定于 Gatsby 的有用增强功能。所有道具都传递给@reach/router's<Link>组件。应用于您的代码：

<Link
  to={`/comppath`}
  state={{ myProp: 'hello'}}
>

然后在您的 中OtherComponent，您将需要检查：location.state.myProp这将hello作为一个值。

要传递 a props，您只需要更改hello您的对象：

  state={{ myProp: props }}

您可以在Gatsby Link API 文档中查看更多信息。

于 2020-08-08T12:26:45.127 回答