React Vite + React Router Dom - Scroll bar missing after clicking on NavLink - css

Question

I need some help... I'm building a multi-page B&B app using React (Vite) and React Router Dom. I'm also using React Query, React Scroll Parallax, Material UI and Redux Toolkit.
Here's my problem:
If I click on most of the NavLink components in my navbar, the url changes and the page routes correctly, BUT, the scroll bar is missing and I can't scroll the page. However if I manually refresh the page in the browser, the scroll bar is back again and everything works as expected. Also, this doesn't happen on all of my NavLinks, only some of them. For instance, the Login and Register NavLinks render with the scrollbar, as well as my About page inside my Footer component. I have checked to see if there are any differences in the structuring of the Routes or the NavLink components, but I couldn't see any differences.
I have tried automatically refreshing the page once with useEffect, but I can't get it to refresh only once, it keeps refreshing in a loop, so I removed it...
ANY HELP WOULD BE HIGHLY APPRECIATED...
Here is my App.jsx:
function App() {
const { pathname } = useLocation();
useEffect(() => {
window.scrollTo(0, 0);
}, [pathname]);
return (
<div className="App">
<Navbar />
<div id="back-to-top-anchor" style={{ minHeight: "0" }}></div>
<ParallaxProvider>
<Routes>
<Route path="/" element={<Home />} />
<Route path="about" element={<About />} />
<Route
path="all-listings"
element={<AllListings initialState={initialState} />}
/>
<Route
path="listing/:listingId"
element={<Listing initialState={initialState} />}
/>
<Route path="how-it-works" element={<HowItWorks />} />
<Route path="contact-us" element={<ContactUs />} />
<Route path="login" element={<Login />} />
<Route path="register" element={<Register />} />
<Route path="*" element={<ErrorPage />} />
<Route path="my-listings" element={<MyListings />} />
</Routes>
</ParallaxProvider>
<ShapeDivider color="#ffffff">
<Footer />
</ShapeDivider>
</div>
);
}
And here is my menu inside NavBar.jsx:
const menu = (
<>
<div
onClick={() => {
setMobileOpen(true);
}}
className={classes.navbarSmallMenu}
>
<NavLink
className={({ isActive }) =>
isActive ? classes.activeNavbarStyle : undefined
}
to="/"
>
Home
</NavLink>
<NavLink
className={({ isActive }) =>
isActive ? classes.activeNavbarStyle : undefined
}
to="all-listings"
>
All Listings
</NavLink>
<NavLink
className={({ isActive }) =>
isActive ? classes.activeNavbarStyle : undefined
}
to="how-it-works"
>
How It Works
</NavLink>
<NavLink
className={({ isActive }) =>
isActive ? classes.activeNavbarStyle : undefined
}
to="contact-us"
>
Contact Us
</NavLink>
</div>
<div className={classes.navbarSmallMenu}>
{isUserLoggedIn ? (
<>
<IconButton
id="profile-avatar"
onClick={handleOpenUserMenu}
sx={{ p: 0 }}
>
<Avatar alt="User Profile" />
</IconButton>
<Menu
className={classes.profileMenu}
id="menu-appbar"
anchorEl={anchorUser}
anchorOrigin={{
vertical: "top",
horizontal: "right",
}}
keepMounted
transformOrigin={{
vertical: "top",
horizontal: "right",
}}
open={Boolean(anchorUser)}
onClose={handleCloseUserMenu}
>
<NavLink
className={({ isActive }) =>
isActive ? classes.activeNavbarStyle : undefined
}
to="/"
>
Show Profile
</NavLink>
<ul>
<li>
<NavLink
className={({ isActive }) =>
isActive ? classes.activeNavbarStyle : undefined
}
to="my-listings"
>
My Listings
</NavLink>
</li>
<li>Pages</li>
<li>Goes</li>
<li>Here</li>
<li
className={classes.logOutButton}
onClick={() => {
localStorage.clear();
navigate(0);
}}
>
Log Out
</li>
</ul>
</Menu>
</>
) : (
<>
<NavLink
className={({ isActive }) =>
isActive ? classes.activeNavbarStyle : undefined
}
to="login"
>
Login
</NavLink>
<NavLink
className={({ isActive }) =>
isActive ? classes.activeNavbarStyle : undefined
}
to="register"
>
Register
</NavLink>
</>
)}
</div>
</>
);```