Reach-Routers navigate () со смещением для якорных ссылок?

Question

Есть ли способ сделать

navigate('/#about')

с reach-router, но со смещением, скажем, -16px? Я не смог ничего найти по этому поводу.

Answer 1

Вы можете передать состояние ссылке следующим образом:

...

navigate(
    "/#about/",
    {
        state: { offset: "-16px" },
    }
)

...

и затем получить доступ к состоянию из целевого компонента. Вы можете передать его в любую часть этого компонента.

Подробнее об этом можно прочитать здесь: https://www.gatsbyjs.org/docs/gatsby-link/#add -состояние-в-программирование c -навигатор

Answer 2

Другим решением может быть прослушивание изменений маршрута и вызов scroll(0, -16);, если URL содержит привязку. См. https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll. Возможно, достаточно позвонить scroll после вызова navigate.