Getting bugs in Routing in React - reactjs

Question

I am having a unusual problem in my routing. I have a home page and then in the mid level of the home page, I have a link of my about page. When I click on that in redirects me to the mid level of the about page. Why it is not taking me to the top level of the about page. I think I have scrolled in home page cause it has also scrolled in the about page I don't know it is a very weird problem .I am providing my nav items and all my Links' code here. Please give me a solution if you can.
import React, { Component } from 'react'
import { BrowserRouter, Switch, Route, Redirect } from 'react-router-dom'
import Nav from './Components/Nav'
import Home from './Components/Home'
import About from './Components/About'
import Project from './Components/Project'
import Skills from './Components/Skills'
import Services from './Components/Services'
import Contact from './Components/Contact'
const App = () => {
return (
<>
<BrowserRouter>
<Nav />
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/service" component={Services} />
<Route path="/project" component={Project} />
<Route path="/skill" component={Skills} />
<Route path="/contact" component={Contact} />
<Redirect to="/" />
</Switch>
</BrowserRouter>
</>
)
}
export default App
import React, { useState } from 'react'
import { NavLink, Link } from 'react-router-dom'
import Mode from './Mode'
import Button from '#material-ui/core/Button'
const Nav = () => {
const [icon, setIcon] = useState(false)
const [open, setClose] = useState(false)
function Nav() {
document.querySelector('#NavLinks').style.transform = 'scaleX(1)'
setClose(!open)
setIcon(!icon)
}
function NavClose() {
document.querySelector('#NavLinks').style.transform = 'scaleX(0)'
setClose(!open)
setIcon(!icon)
}
return (
<>
<nav data-aos="fade-in">
<div id="Container">
<div id="NavContentWrapper">
<h2 id="NavTitle">
<Link to="/">DevR</Link>
</h2>
<ul id="NavLinks">
<li>
<NavLink exact activeClassName="active" to="/">
Home
</NavLink>
</li>
<li>
<NavLink activeClassName="active" to="/about">
About
</NavLink>
</li>
<li>
<NavLink activeClassName="active" to="/service">
Service
</NavLink>
</li>
<li>
<NavLink activeClassName="active" to="/project">
Projects
</NavLink>
</li>
<li>
<NavLink activeClassName="active" to="/skill">
Skills
</NavLink>
</li>
<li>
<NavLink activeClassName="active" to="/contact">
Contact
</NavLink>
</li>
<li>
<Mode />
</li>
</ul>
<div id="Bar">
<Button
variant="outlined"
color="primary"
onClick={open ? NavClose : Nav}
>
{icon ? (
<i className="fas fa-times"></i>
) : (
<i className="fas fa-bars"></i>
)}
</Button>
</div>
</div>
</div>
</nav>
</>
)
}
export default Nav

Answer 1

Add this to your App component:
const location = useLocation();
useLayoutEffect(() => {
window.scrollTo(0, 0);
}, [location.pathname]);