stale-app-link.js

// If the user has been on the page for over 12 hours, the next link
// click will do a full page transition to get new code
import React from "react";
import { BrowserRouter, useLocation } from "react-router-dom";

let hour = 3600000;

export default function StaleAppRouter(props) {
  let [isStale, setIsStale] = useState(false);

  useEffect(() => {
    let id = setTimeout(() => {
      setIsStale(true)
    }, hour * 12)
    return () => clearTimeout(id)
  }, []);

  return <BrowserRouter forceRefresh={isStale} />
}

// now replace your <BrowserRouter /> with a <StaleAppRouter />

It seems that modifying forceRefresh after initialization is unsupported. Has anyone had success with the examples here?

Comment from Michael on the prop:
remix-run/history#477 (comment)

BrowserRouter source (history is never reinitialized):
https://github.com/ReactTraining/react-router/blob/346153e38365e6a88657ce2e4e5acada290fc430/packages/react-router-dom/modules/BrowserRouter.js#L10-L16

The suggested solution looks to be using key, but that would result in a full remount of the app tree below Router, which is (probably) undesirable.