Реагирование веб-навигации на основе якорей

Question

Я пытаюсь настроить реагирующее веб-приложение на «одной странице». Я помещаю одностраничные слова между двойными кавычками, потому что это именно то, что я имею в виду. Мое приложение имеет только одну страницу со всеми компонентами, расположенными один за другим, поэтому общее решение реакции-маршрутизатора, которое позволяет вам отображать только часть приложения, не работает для меня. Намерение состоит в том, чтобы иметь только одну страницу (настолько большую, насколько она становится), и пользователь может перемещаться между разделами на ней через меню (или подобное). Кроме того, сайт должен распознавать, когда кто-то вводит URL-адрес, например http://url.com/#section4,, и автоматически переходить к требуемому разделу, отмечая выбранный раздел в меню как активный. Кроме того, было бы неплохо, если бы URL-адрес мог меняться в зависимости от прокрутки страницы. Если кто-то знает какую-нибудь библиотеку, компонент и т. Д. Или как я могу это сделать, я был бы очень благодарен. Спасибо заранее.

Answer 1

Что ж, после поиска я нашел эту библиотеку https://www.npmjs.com/package/react-router-hash-link,, которая работает в сочетании с BrowserRouter маршрутизатора React, и позволяет иметь основанную навигацию привязки, а также настраивать функцию прокрутки, где вы можете установить смещение или все, что вы хотите. Примерно так:

<NavHashLink to="#anchor1" scroll={el => this.scroll(el)}>Anchor1</NavHashLink>

  scroll (el) {
    const offset = document.getElementById('element').offsetHeight
    window.scrollTo({ top: el.offsetTop - offset, left: 0, behavior: 'smooth' })
  }

Надежда может помочь другим ....

Answer 2

Вы должны либо использовать HashRouter из response-router-dom , либо вы можете использовать NavLink из того же пакета, как этот:

<NavLink>  
    to="/foo/#bar"  
    isActive={()=> window.location.pathname + window.location.hash === "/foo/#bar"}  
</NavLink>