Router problem. Page position stay the last page position when I change any router in react-router version 6

user_15379448 0
Viewed 355

I have used react-router version 6. Everything is ok. But there is a problem that is when I change any route suppose these is 2 route once about, another contact. And now I am in the middle of the about page. Now, when I click contact Route Page and router is changed but the problem is webpage still stays middle of the page. Generally when we click any link for change route page position will automatically start from the top. then we have to scroll. but react-router version 6 has this problem. the page will not start from the top position. page position is staying the last page position.

How can I solve this problem? please help me. If are you not understood my question please let me know in the comment section.

router file code

import React from "react";
import { Route, Routes } from "react-router-dom";
import Navbar from "../Components/Navbar/Navbar";

const NavbarRouter = () => {
    return (
        <Routes>
            <Route path="/" element={<Navbar />}>
                <Route index element={<Home />} />
                <Route path="about" element={<About />} />
                <Route path="contact" element={<Contact />} />
            </Route>
        </Routes>
    );
};

Navbar Code

import React from 'react';
import {Outlet,Link} from "react-router-dom"


const Navbar = () => {
    return (
        <div>
            <nav className="navbar position-fixed navbar-expand-lg navbar-light bg-light">
                <div className="container-fluid">
                    <a className="navbar-brand" href="#">
                        Navbar
                    </a>
                    <button
                        className="navbar-toggler">
                        <span className="navbar-toggler-icon"></span>
                    </button>
                    <div className="collapse navbar-collapse" id="navbarNav">
                        <ul className="navbar-nav">
                            <li className="nav-item">
                                <Link className="nav-link" to="/">Home</Link>
                            </li>
                            <li className="nav-item">
                                <Link className="nav-link" to="/about">About</Link>
                            </li>
                            <li className="nav-item">
                                <Link className="nav-link" to="/contact">Contact</Link>
                            </li>
                            <li className="nav-item">
                                <a className="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">
                                    Disabled
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>

            <Outlet />
        </div>
    );
};

export default Navbar;
react-router-dom react-router reactjs routes javascript
1 Answers

In the NavbarRouter wrapper component use the useLocation and useEffect hooks to "listen" for route changes and scroll the window back to the top.

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

const NavbarRouter = () => {
  const { pathname } = useLocation();

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);
  
  return (
    <Routes>
      <Route path="/" element={<Navbar />}>
        <Route index element={<Home />} />
        <Route path="about" element={<About />} />
        <Route path="contact" element={<Contact />} />
      </Route>
    </Routes>
  );
};

If you need to configure/customize the behavior for how the view is scrolled back to the top then use the options argument version. Set the behavior option to one of auto (default), smooth, or instant. auto is the default and lets the browser decide whether to use smooth or instant scrolling. If you don't want to see a scrolling animation specify the instant option.

window.scrollTo({
  top: 0,
  left: 0,
  behavior: 'instant',
});

window.scrollTo

user_86908570
Related