Reactでvideo.js ページ遷移で動画を切り替える時の話

動画を扱うサイトで、ページ遷移時に同コンポーネント内で見る動画だけを切り替えるというのはよくある仕様だと思う。今回はReactでvideo.jsによって動画再生するように実装したが、初回のページ表示ではちゃんと動画再生されても、動画を切り替える際にエラーとなり、動画再生ができない事象に遭遇した。
以下の公式の通り実装したつもりであるが、うまくいかなかった（自分の他部分の実装が悪い可能性も否定はできないが）

https://videojs.com/guides/react/

useEffectのライフサイクルでvideoインスタンスを破棄するように実装しているが、同ページへの遷移の場合、このライフサイクルがうまく機能していないようである。

const VideoRoot = () => {
  const playerRef = React.useRef(null);
  .
  .
  .
  React.useEffect(() => {
    const player = playerRef.current;

    return () => {
      if (player && !player.isDisposed()) {
        player.dispose();
        playerRef.current = null;
      }
    };
  }, [playerRef]);

解決方法

方法自体はシンプルなもので、videoを丸々扱っているコンポーネント自体を再マウントする事で解決した。上記例だと、VideoRootコンポーネント自体を再マウントする事になる。videojsのインスタンス有無の管理自体を破棄してしまい、ページ遷移でも常に初回と同じように読み込ませる事になる。
※以下、関連部分のみ書き出し

    const [showVideo, setShowVideo] = useState<boolean>(false);
    
    // 動画情報を読み取ったら表示させる
    setShowVideo(true);
    
    // ページ遷移の前にVideoRootが破棄されるようにする
    setShowVideo(false);
    navigate(同ページ/videoId);
    
    
    showVideo && <VideoRoot {動画情報を渡す} />