Is there a way to change behaviour before rerender when back/forward buttons pressed in browser

Question

Hi guys hope you're well and all set for Christmas

So I have this functional component which plays an animation when you press a link to change the page. This is really nice but is completely bugged on browsers like Safari for iOS, due to gestures where you can swipe back and forth.

I need for a component to be able to check if a rerender is caused by BACK/FORWARD BUTTON PRESSES/GESTURES, and then change variables to stop animations and such.

Here's the component, with all the unimportant stuff removed obviously.

This component has all attempts at back button/forward button detection code removed.

We want the reference noTransition.current to change when the URL changes due to these buttons being pressed. This value MUST change before any rerender happens after the buttons are pressed.

const Central = (props) => {
    let location = useLocation();

    var noTransition = useRef(true);
    const history = useNavigate()

    noTransition.current = false;

    return (
        <div className="centralMain">
            <SlickContainer noTransition={noTransition.current}/>
            {/* actual component here doesn't matter, just the fact that the "noTransition" attribute must change */}
        </div>
    )
}

export default Central

I've tested about a billion solutions, some kind of promising but all very hacky. I got very excited about the idea of having a window.onpopstate listener which would change the noTransition.current value but I quickly (after several hours) learnt that the render when the URL changes actually happens before the listener fires off, so it is futile.

I did also try having useEffects for stuff like Navigator, but then I learnt that useEffect actually fires after render...

I also tried some really wacky ideas with passing time values from Links via state and comparing how long it had been. This is ultimately a hack, and I need a proper solution.

If you have any ideas, or need any additional information or code, please do let me know.

Please note that we are unfortunately using react-router v6.

Thank you for listening, please help me.

Answer 1

You can use a custom history to listen to navigation events.

// history.js

import history from 'history/browser'; // v6
// import { createBrowserHistory } from 'history'; // v5
// const history = createBrowserHistory(); // v5

export default history;


// app.js

import { CustomRouter } from './customRouter';
import history from './history';

const App = () => {

  ...
  /* Use Router instead of BrowserRouter and add custom-history */
  <CustomRouter navigator={history}> {/* prop is called history for v5 */}
    ... routes
  </CustomRouter>

  ...
}
...

// component

const Central = (props) => {
    const noTransition = useRef(false);

    useEffect(() => {
        const unlisten = history.listen(({ action, location }) => {
            // POP === popstate event; browser back/forward navigation
            noTransition.current = action === 'POP' ? false : true;
        });
        return unlisten;
    }, []);

    return (
        <div className="centralMain">
            {/* Pass ref instead of value and access ref.current inside container */}
            <SlickContainer noTransition={noTransition.current}/>
            {/* actual component here doesn't matter, just the fact that the "noTransition" attribute must change */}
        </div>
    )
}

export default Central

See this answer for a basic CustomRouter implementation!