Browser's back button makes the page move in the opposite direction

[masakudamatsu]

Problem

• Clicking the browser's back button moves the current page to the left; the previous page appears from the right.

Ideal solution

• The current page should move to the right; the previous page should appear from the left.

[masakudamatsu]

How to detect the back button click and the forward button click: https://stackoverflow.com/a/60125216/11847654

[masakudamatsu]

A possible solution

1. Use document.onreadystatechange = () => {} to detect the loading of a page

   • See http://jsfiddle.net/Riade_bg/enpzx392/3/ for an example
   • See https://www.evernote.com/l/AFPR79ToIuVPYIcbg60VelstN0IJ2GczMSI for document.readyState object

2. Detect whether page is loading after the browser's back/forward button click

   • For how, see https://stackoverflow.com/a/60125216/11847654

3. Use the array of history to check whether the previous page is to the left or to the right

4. Overwrite the page transition animation class name on TransitionGroup component

[masakudamatsu]

A day of investigation reveals:

• Instead of document.onreadystatechange = () => {}, we can use React.useEffect() to detect the loading of a page.
• The technique to disable the back button may include useful lines of code
  • https://medium.com/@subwaymatch/disabling-back-button-in-react-with-react-router-v5-34bb316c99d7
  • https://stackoverflow.com/a/34337617/11847654