Активные ссылки в Гэтсби кажутся разорванными из-за косой черты в конце
Я хочу выделить свой элемент, когда нахожусь на нужной странице, поэтому использую этот код:
const isActive = ({ isCurrent }) => {
return isCurrent ? { className: "active" } : null
}
<Link getProps = {isActive} to = "/post">Articles</Link>
Он работает для /post, но не работает для /post/
Как исправить это для обоих случаев?
Я использую :
gatsby-link: https://www.npmjs.com/package/gatsby-link
которые используют: https://reach.tech/router/example/active-links
@DominikKrzywiecki, ладно, спасибо. Я обновляю свой вопрос
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Итак, есть плагин https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-remove-trailing-slashes, который удаляет завершающие косые черты из URL-адреса, и я считаю, что это правильное решение.
Если по какой-то причине вы не хотите устанавливать эту зависимость, вы можете настроить свою функцию isActive, получить параметр href и сравнить с window.location.pathname (сначала удалите завершающую косую черту с последней), и тогда это также будет работать, но я настоятельно рекомендую первый решение.
Gatsby v2 устраняет необходимость в этой функции.
База кода и примеры содержат версию функции, но лучше использовать partiallyActive и реквизиты activeStyle.
<Link
to = "/post"
partiallyActive = {true}
activeStyle = {styles.active}
>
Articles
</Link>
const styles = {
active: {
borderBottomColor: `#663399`,
color: `#663399`,
}
}
Это работает для меня, я постараюсь объяснить, почему вы в это верите
Виноват. Раньше это было проблемой, но я только что провел тест с последним Gatsby и, похоже, он работает.
Не могли бы вы добавить еще немного кода? Я попытался запустить его локально, но затем получаю сообщение об ошибке:
React does not recognize the getProps prop on a DOM element..