我正在使用[[email protected]](https://stackoverflow.com/cdn-cgi/l/email-protection)
,我遇到了一个问题。路由工作正常,但当我在页面中间,并点击任何链接在我的导航栏或任何其他链接路由到另一个页面,下一页打开从中心,而不是从顶部。经过一番挖掘,我发现有一个来自react-router-dom
的ScrollRestoration
组件可以用来滚动到顶部,而不是传统的useEffect
滚动到顶部解决方案。但是在他们给出的例子中,我不明白如何在createBrowserRouter
中使用它。
下面是我的app.js文件中的代码:
import { RouterProvider, createBrowserRouter } from 'react-router-dom'
import {
Courses,
Error,
Home,
HomeLayout,
Login,
Register,
Testing,
Course,
Contact,
About,
FAQ,
Events,
EventDetails,
Library,
Admin,
} from '@/pages'
const router = createBrowserRouter([
{
path: '/',
element: <HomeLayout />,
errorElement: <Error />,
children: [
{
index: true,
element: <Home />,
},
{
path: 'courses',
element: <Courses />,
},
{
path: 'single-course',
element: <Course />,
},
{
path: 'testing',
element: <Testing />,
},
{
path: 'contact',
element: <Contact />,
},
{
path: 'about-us',
element: <About />,
},
{
path: 'faq',
element: <FAQ />,
},
{
path: 'events',
element: <Events />,
},
{
path: 'event-details',
element: <EventDetails />,
},
{
path: 'library',
element: <Library />,
},
],
},
{
path: '/login',
element: <Login />,
},
{
path: '/register',
element: <Register />,
},
{
path: '/admin',
element: <Admin />,
},
])
const App = () => {
return <RouterProvider router={router} />
}
export default App
2条答案
按热度按时间qoefvg9y1#
正确使用此代码:
从'react-router-dom'导入ScrollRestoration,并使用ScrollRestoration组件 Package RouterProvider组件,并设置onBeforeRestore回调以滚动到页面顶部。在这个例子中,window.scrollTo(0,0)用于滚动到顶部,之后当您导航到新路由时,页面将自动滚动到顶部。
agyaoht72#
ScrollRestoration
组件也只适用于数据路由器,因此您必须使用使用createBrowserRouter
、createMemoryRouter
等创建的路由器之一。关于docs:
重要信息
此功能仅在使用数据路由器时有效,请参阅Picking a Router
您应该只呈现其中一个,建议您在应用的根路由中呈现它
创建一个布局路由组件,以呈现为根路由元素,该元素呈现嵌套路由的
ScrollRestoration
* 和Outlet
*。范例: