Как мне установить Gatsby Link как тег <li>вместо тега <a>?

Question

Я создаю сайт Gatsby, и у меня есть следующая структура HTML для меню веб-сайта:

<li className="menu-item current-menu-item">
  <Link to="/">Home</Link>
</li>
<li className="menu-item">
  <Link to="/contact">Contact</Link>
</li>

Как видите, активный класс применяется к тегу <li>, а не тег <a>, генерируемый <Link>. В Vue мы можем сделать что-то вроде этого:

<router-link to="/contact" tag="li">
  <a href="javascript:void">Contact</a>
</router-link>

Свойство tag указывает элементу router-link, что он должен отобразить элемент как элемент списка. Таким образом, активный класс применяется к элементу списка, а не к дочернему тегу <a>. Как мне добиться того же результата с Gatsby Link? Я не могу найти ответ на это нигде. Спасибо.

Answer 1

Вы не хотите использовать li вместо тега a. Вы просто хотите, чтобы li отображался как активный, когда активен соответствующий тег a. Ссылки должны быть a тегами в качестве стандарта HTML.

Гэтсби использует reach-router для маршрутизации, поэтому при работе с путями и маршрутизацией вы можете использовать объект globalHistory для получения текущего пути:

import { globalHistory } from '@reach/router'

Затем внутри вашего компонента получите pathname текущего пути:

const pathname = globalHistory.location.pathname

Теперь все, что вам нужно сделать, это условно установить стиль каждого li, основываясь на значение pathname:

<li className={`menu-item ${pathname === "/" ? "current-menu-item" : ""} `}>
  <Link to="/">Home</Link>
</li>
<li className={`menu-item ${pathname === "/contact" ? "current-menu-item" : ""} `}>
  <Link to="/contact">Contact</Link>
</li>

Может быть проще иметь массив ваших ссылок:

const navLinks = [
  { label: 'Home', to: '/' },
  { label: 'Contact', to: '/contact' },
  { label: 'About', to: '/about' },
]

И затем отобразить их внутри оператора возврата вместо их записи индивидуально:

return (
  <ul>
    {navLinks.map(link => (
      <li className={`menu-item ${pathname === link.to ? 'current-menu-item' : ''} `}>
        <Link to={link.to}>{link.label}</Link>
      </li>
    ))}
  </ul>
)