Как заставить Link из react-router скроллить к диву?

Question

[Игорь Шумиловский]

Имеется обычное меню с парой ссылкой. Некоторые из них ведут на отдельные страницы, а остальные должны скроллить к нужному диву на странице.

Рендерятся пункты меню так:

renderNav() {
    return menu.map((item, index) => {

      return (
        <li className='menu-item' key={index}>
          <Link to={`${item.link}`} className="menu-link" activeClassName="menu-link--is_active">{item.name}</Link>
        </li>
      )
    })
  }

Как победить Link? На ум приходят только некрасивые костыли, но не хочется их юзать

Answer 1

[Никита Гущин]

1. В случае, если у Вас сложная логика: Link принимает свойство state, через него можно передавать идентификатор куда скролить, например.

Затем подписываетесь на history:

let unlisten = history.listen(location => {
  console.log(location.state); // <-- переданный в Link state.
})

Дальше любым известным Вам способом скролите к нужному элементу.
Но я бы Вам настоятельно советовал не выходить за рамки якорей (хэш в конце url) касаемо навигации.

2. Навигация с хешем:
Link принимает свойство hash, которое так-же можно получить подписавшись на history

<Link  to="some" hash="#idOfElement" >Scroll to</Link>

let unlisten = history.listen(location => {
  console.log(location.hash); // <-- переданный в Link hash.
})

Comments

[Игорь Шумиловский]

Не совсем понял, как мне это реализовать. Свойство state принимает объект. Сам компонент меню лежит отдельно от компонента, где инициализировано history. Мне нужно так же инициализировать хистори или передать его в меню? Не могли бы немного подробнее рассказать?

[Игорь Шумиловский]

Суть в том, что Link воспринимает ссылки #element в атрибуте to как ссылка на роут, а не на айдишник на странице. Собственно, вопрос не в том, как подписаться на хистори, а как заставить link to="#element" работать как a href="#element"

[Никита Гущин]

Игорь Шумиловский: подправил ответ. В любом случае: ссылка с #element - это не что иное, как новый роут.