بقاء الصفحة في وضعية النزول عند التنقل من صفحة الى صفحة باستخدام react-router

في الموقع الرسمي ل react-router لديهم حل لهذه المشكلة وهذا هو الرابط

والحل المقترح من طرفهم هو ببساطة انشاء مكون ثم في ذلك المكون استخدمو الخطاف useLocation ليجلبو ال pathname بعدها اعطوه كمعيار ل useEffect مما يعني انه كلما تغير pathname سيعمل الكود داخل ال useEffect وهو عبارة عن كود يضمن ان الصفحة ستكون في الوضعية الاولية.

import React,{ useEffect } from 'react';
import { BrowserRouter as Router, Switch, Route,useLocation } from 'react-router-dom';

import Navbar from './components/navbar';
import Footer from './components/footer';
import Home from './pages/home';
import About from './pages/about';
import Dashboard from './pages/dashboard';

 function ScrollToTop() {
  const { pathname } = useLocation();

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);

  return null;
}

export default function BasicExample() {
  return (
    <Router>
      <div>
      <ScrollToTop></ScrollToTop>
        <Navbar></Navbar>
        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/dashboard">
            <Dashboard />
          </Route>
        </Switch>
        <Footer></Footer>
      </div>
    </Router>
  );
}

بحسب  التوثيق الرسمي يمكنك إنشاء المكون التالي و الذي يقوم بالتمرير لأعلى عند التنقل بين الصفحات باستخدام التابع (scrollTo(0, 0 و الذي يقوم بالتمرير لأعلى الصفحة

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

export default function ScrollToTop() {
  const { pathname } = useLocation();

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);

  return null;
}

بعدها يمكنك استيراد هذا المكون و استخدامه قبل ال switch 

import ScrollToTop from './HOC/ScrollToTop'

<BrowserRouter >        
    <Layout>
      <ScrollToTop />
        <Switch>
          <Route path="/" exact component={MainPageConfig} />
        </Switch>
    </Layout>
  </BrowserRouter>