Можно ли передать мои собственные реквизиты при использовании @reach / router с Gatsby?

Question

Я пытаюсь передать свои собственные реквизиты (функции, объекты и т. Д.), Но они не проходят, но когда я пытаюсь использовать @reach/router без gatsby, он работает нормально.

Мой 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 и метод навигации... и т. д., но не мою опору

примечание: я использую gatsby-plugin-create-client-paths

Answer 1

С участием <Link> компонент (расширенный React's @reach/router) вы можете пройти state объект, который может включать все, что вы хотите.

<Link> компонент действительно это обертка @reach/routerкоторый добавляет полезные улучшения, характерные для Gatsby. Все реквизиты передаются в@reach/routerс <Link>составная часть. Применяется к вашему коду:

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

Тогда в вашем OtherComponent, вам нужно будет проверить: location.state.myProp который будет иметь hello как ценность.

Чтобы пройти props, тебе просто нужно изменить hello для вашего объекта:

  state={{ myProp: props }}

Дополнительную информацию можно найти в документации Gatsby Link API.