Блог

Я боролся с этой проблемой около 2 часов и не могу найти способ сделать это.

Я хотел бы обновить свой хэш URL-адреса (#home, #about и т. Д.) При прокрутке этих разделов и таким же образом выделить текущий раздел в моей панели навигации. Я нашел разные ответы в Jquery, но дело в том, что я использую ReactJS, и мне сказали, что использовать Jquery с ReactJS не очень хорошая идея / полезно использовать Jquery с ReactJS.

Я также нашел и попробовал этот пакет:https://www.npmjs.com/package/react-scrollable-anchor Но проблема в том, что хэш обновляется только после завершения прокрутки.

Редактировать :

 <ul>
  <li>
      <a href="#">Home</Link>
  </li>
  <li>
      <a href="#about">About</Link>
  </li>
  <li>
      <a href="#skills">Skills</Link>
  </li>
</ul>
  

Когда я нажимаю на About, мой URL-адрес становится следующим: localhost: 3000 / #about и автоматически переходит к этому разделу, отсюда все в порядке.
Но если я прокручиваю (нигде не щелкая) раздел навыков, я хочу, чтобы URL-адрес автоматически переходил на localhost: 3000 / #skills, а панель навигации высвечивала навыки.

Надеюсь, вы сможете помочь мне решить эту проблему. Спасибо!

Вы должны просто использовать библиотеку ‘react-router-dom’ для маршрутизации и обработки URL-путей. у них очень четкая документацияhttps://reactrouter.com/web/example/basic. For You help Просто определите путь в to реквизите Link , куда вы хотите перейти!

        <ul>
          <li>
            <Link to="/test">Home</Link>
          </li>      
          <li>
            <Link to="/dashboard">Dashboard</Link>
          </li>
        </ul>
  

Теперь просто перейдите к этому объявленному пути, обернув его в

           <Route exact path="/test">
            <Home />
          </Route>
  

Делая все это.Хэш URL больше не будет проблемой 😉