Reflecting UI changes to the route

Sometimes this would be grate to have UI state in route. for example in a list that is filtered with some check boxes. When the user clicks on a checkbox I like the route to change so that the user is able to share that route or bookmark it. I don’t want to use # since Google will ignore it. currently if I do something like this:

import history from './history';
history.replace('/itemts/filter=discount,new');

It will change the position of my scroll. How can I implement such a thing?

[frenzzy]

let previousLocation = history.location;
function onLocationChange(location) {
  // here you have both location and previousLocation
  previousLocation = location;
}

[frenzzy]

You need to decide in which case you don’t need to scroll. For example you may skip scrolling if path wasn’t changed or if history.replace were used.

if (!(previousLocation.pathname === location.pathname && action === 'REPLACE')) {
  window.scrollTo(scrollX, scrollY);
}