выделить ссылку активной страницы в React / Gatsby - PullRequest
Новая
       3

выделить ссылку активной страницы в React / Gatsby

0 голосов
/ 30 января 2020

Здесь не используется React Router, хотелось бы, чтобы все было просто. Я использую Gatsby, у которого есть activeClassName атрибут с системой <Link>, однако, я думаю, что он не работает, потому что я использую его на главной навигационной панели, тогда у меня есть субнав с категориями.

Решение, которое я нашел для subnav, это небольшая функция, позволяющая определить, находитесь ли вы в каталоге: 

  const activeStyle = {
    color: "green",
    background: "red",
  }
  function pathIncludes(word) {
    return window.location.href.includes(word) ? { activeStyle } : ""
  }

, а затем внутри моего return (): 

<ul>
    <li styles={pathIncludes('motion')}>
        <Link to="./motion">Motion</Link>
    </li>
    <li styles={pathIncludes('design')}>
        <Link to="./design">Design</Link>
    </li>
    <li styles={pathIncludes('illustration')}>
        <Link to="./illustration">Illustration</Link>
    </li>
</ul>

It почти работает, отображается на странице, которую я получаю <li class="[object Object]">

Как мне передать jsx?

Или есть лучший способ сделать это, что не требует установки дополнительных зависимостей?

Ответы [ 2 ]

2 голосов
/ 30 января 2020

Я думаю, что проблема в скобках {} вокруг activeStyle в строке

return window.location.href.includes(word) ? { activeStyle } : ""

Они действуют как разрушающие activeStyle объект. Но стиль ожидает объект. Так что

return window.location.href.includes(word) ? activeStyle : "" `

должно работать.

0 голосов
/ 06 февраля 2020

Я попробовал принятый ответ, он отлично работает для URL-адресов, имеющих хвостовые пути (example.com/about), но не работает для домашних страниц (example.com/).

Я немного притаился и нашел гораздо более элегантное решение, которое использует нативную Gatsby's <Link> getProps prop ( read @ reach / routs документация для получения дополнительной информации ).

Итак, если мы добавим домашнюю страницу в ваш пример (даже если это не так, кажется, что это более подходящий способ стилизации активных ссылок), решение будет выглядеть так: 

function isActive( {isCurrent} ) {
    return isCurrent ? {className: "active"} : null
}

<ul>
  <li>
    <Link to="/" getProps={isActive}>Home</Link>
  </li>
  <li>
    <Link to="/design" getProps={isActive}>Design</Link>
  </li>
  <li>
    <Link to="/illustration" getProps={isActive}>Illustration</Link>
  </li>
</ul>
...