Реагировать - Навигация, которая будет плавной прокрутки к разделу страницы

Question

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

Я хочу, чтобы моя навигация была вверху страницы со ссылками, которые, когда пользователь нажимает, будут плавно прокручивать их вниз к разделу страницы. Мне бы также хотелось, чтобы, если пользователь, например, сразу перейдет по ссылке website.com/about, он будет плавно переходить к разделу так же, как если бы вы нажали about в компоненте навигации.

I Я понимаю, как react-router-dom работает для маршрутизации страниц, но я не совсем понимаю, как заставить его работать для этой конкретной цели.

Может ли это быть достигнуто с помощью HashRouter ?

Вот код, который у меня сейчас есть:

function Header() {
  return (
    <>
      <Link to="/">Hero</Link>
      <Link to="/">About</Link>
      <Link to="/">Contact</Link>
    </>
  );
}

function Hero() {
  return (
    <section>
      <h1>Hero Section</h1>
    </section>
  );
}

function About() {
  return (
    <section>
      <h1>About Section</h1>
    </section>
  );
}

function Contact() {
  return (
    <section>
      <h1>Contact Section</h1>
    </section>
  );
}

export default function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Header />
        <Hero />
        <About />
        <Contact />
      </BrowserRouter>
    </div>
  );
}

Я также предоставляю CodeSandBox , вилы оценены! :)

Answer 1

Что вы можете сделать, это использовать тег anchor вместо Link из react-router-dom и иметь id в разделах. при щелчке по тегу привязки выделите соответствующий раздел

 <a
  href="/"
  onClick={e => {
  let hero = document.getElementById("hero");
  e.preventDefault();  // Stop Page Reloading
  hero && hero.scrollIntoView();
  }}
  >
  Hero
  </a>

  // Rest of Code 

  function Hero() {
   return (
    <section id="hero">
      <h1>Hero Section</h1>
    </section>
   );
  }

и выделите раздел, используя URL-адрес path, вам потребуется извлечь path из url и прокрутить до раздел с указанным c path в качестве идентификатора

  useEffect(() => {
    let url = window.location.href.split("/");
    let target = url[url.length - 1].toLowerCase();
    let element = document.getElementById(target);
    element && element.scrollIntoView({ behavior: "smooth", block: "start"});
  }, []);

CodeSandbox здесь

Надеюсь, что это поможет

Answer 2

Чтобы разрешить обновление ссылки в адресной строке, используйте ответ от @Abdullah Abid, но измените теги <a> на <link> и href на to.

См. Мой поправка к песочнице Абдуллы Здесь