Scroll Restoration Handler

When the user navigates between different routes in the store, it's necessary to reset the scroll position to the top of the page. The ScrollRestorationHandler component handles this for you.

By default, the component is included in Shop.js. This means it will affect all route changes, which is likely what you want. However, you may remove it from Shop.js and instead add it inside any component in your store if you'd like more granular control over when the scroll position is reset.

Props

The component takes a single optional prop, ignoreForRouteTypes.

This prop should be an array of route types at which you do not want the scroll position to be reset.

The available route types are:

  | 'sortOrderChange'
  | 'filterChange'
  | 'paginationChange'
  | 'Product'
  | 'Category'
  | 'Page'

Example Usage

The following will prevent the scroll from being restored when the sort order or filters have changed.

  <ScrollRestorationHandler
    ignoreForRouteTypes={['sortOrderChange', 'filterChange']}
  />