Go to the desired location on the page when clicking the navbar in a single-page react-based website

import React from "react";
import "./Header.css";
import "../App.css";
import { GiUbisoftSun } from "react-icons/gi";
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
import { useState } from "react";
function Header() {
const [header, setHeader] = useState(false);

return (
<div className={header ? "header" : "header active"}>
  <div className="headerContainer">
    <div className="headerWrapper">
      <div className="logo">
        <GiUbisoftSun className="logoIcon" />
        <span className="logoTitle">SQUARESPACE</span>
      </div>
      <Router>
        <div className="links">
          <ul>
            <li className="linkProduct">
              <Link to="#footer">Product</Link>
            </li>
            <li className="linkTemplates">
              <Link to="/Templates">Templates</Link>
            </li>
            <li className="linkResources">
              <Link to="Resources">Resources</Link>
            </li>
          </ul>
        </div>
        <div className="userEntry">
          <span className="logIn">LOG IN</span>
          <span className="getStarted">GET STARTED</span>
        </div>
        <Routes>
          <Route path="#footer"></Route>
          <Route path="/users"></Route>
          <Route path="/"></Route>
        </Routes>
      </Router>
    </div>
  </div>
</div>
);
}

export default Header;




import React from "react";
import "./footer.css";

function Footer() {
return (
<div className="footer" id="footer">
  <div className="footerContainer">
    <div className="footerWrapper">
      <div className="footerTextIcon">
        © 2023 · Made with 💕 by Barbaros Ihtiyar
      </div>
    </div>
  </div>
</div>
);
}

export default Footer;

I tried something like this but without success. I tried to do it by giving an id, but it shows the id in the link, it does not go to the desired place. When my request is pressed, the page scrolls down to where I want it. I also looked at the react-router-dom documentation, but I couldn’t find an answer for myself. In the solutions I tried, I could only change the link on the page, when I clicked it, I couldn’t take the page to the desired area. I don’t know where I went wrong. I would appreciate your help.

>Solution :

The best way to do this is to use the "Scroll To Element" React library, which you can find here: https://www.npmjs.com/package/react-scroll-to-element

This library will allow you to easily scroll to a particular element on your page when a user clicks on your navbar link.

Here is an example of how you would use it:

import React from 'react';
import { Link } from 'react-router-dom';
import ScrollToElement from 'react-scroll-to-element';

const MyNavbar = () => {
return (
<div>
  <Link to="#about">About Us</Link>
  <Link to="#contact">Contact Us</Link>
  <ScrollToElement selector="#about" />
  <ScrollToElement selector="#contact" />
</div>
);
};

export default MyNavbar;

In the above example, when a user clicks on the "About Us" or "Contact Us" links, the page will automatically scroll to the element with the corresponding id.

I hope this helps!