如何在react router中使用ScrollRestoration和createBrowserRouter？

Question

我已经为这样的项目创建了路由器。

import React, { lazy } from 'react';
import { createBrowserRouter } from 'react-router-dom';
import ErrorBoundary from '../utils/ErrorBoundary';

const Home = lazy(() => import('../pages/Home'));
const router = createBrowserRouter([
    {
        path: '/',
        element: <ErrorBoundary><MainLayout /></ErrorBoundary>,
        children: [
            {
                path: '',
                element: <Home />
            },
        ]
    }

]);

export default router;

这是我的 app.tsx，从这里我使用了

RouterProvider

。

import { RouterProvider } from 'react-router-dom';
import router from './router';
import React, { lazy, Suspense } from 'react';
import LoadingPage from './components/feedback/LoadingPage';
import ErrorBoundary from './utils/ErrorBoundary';

function App() {
    return (
        <ErrorBoundary>
            <Suspense fallback={
                <LoadingPage />
            }>
                <RouterProvider router={router} />
            </Suspense>
        </ErrorBoundary>
    );
}

export default App;

如何使用

ScrollRestoration

组件向上滚动？。这是我的问题。

Answer 1

您可以使用

ScrollToTop

组件并用它包装您的应用程序。

例如-

//ScrollToTop component:
//imports removed
const ScrollToTop = () => {
  const navigate = useNavigate();

  useEffect(() => {
    const unblock = navigate((location) => {
      window.scrollTo(0, 0);
      return null;
    });

    return unblock;
  }, [navigate]);

  return null;
};

export default ScrollToTop;

//in your app.jsx
..other imports removed
import ScrollToTop from '.path-to/ScrollToTop'; // Import ScrollToTop component

function App() {
  return (
    <ErrorBoundary>
      <Suspense fallback={<LoadingPage />}>
        <RouterProvider router={router}>
          {/* Add ScrollToTop component */}
          <ScrollToTop />
        </RouterProvider>
      </Suspense>
    </ErrorBoundary>
  );
}

export default App;

希望有帮助。