はじめに
筆者が日本語サイトであまり情報を得られなかったので、もし同じようなことで困っている方がいらしたら警告文(エラー)の文字列で検索にヒットして手助けできれば幸いだと記事にしました。
コンソールにとある警告が……
React(18)でサイトを制作しており、ルーティングでReact Router
を使用していました。
そのサイトで、ページ内リンク(URLフラグメント)をすると機能するものの直後に下記の警告(全文ママ)が出たのです。
You are trying to block a POP navigation to a location that was not created by @remix-run/router. The block will fail silently in production, but in general you should do all navigation with the router (instead of using window.history.pushState directly) to avoid this situation.
その他、ページ内リンクした状態でサブページへ移動し、そこからTOPページへのブラウザバックが機能しない現象も発生(ページ移動例:example/toppage#section → example/about → ブラウザバック:TOPページへブラウザバックできない!)。
そのため開発中は、ブラウザバックを検知してページを再読み込みするカスタムフックを作って応急処置をしました(一応ブラウザバックできるようになった)。
ページ内リンクについては「とりあえず機能はしているし一旦様子見でいいか」と一通り実装。そして先日、リファクタリングがてら対応することにしました。
結論
react-router-dom @6.7.0 から react-router-dom @6.6.1 に変更 することで警告が消えました(2023年9月現在の直近で更新された react-router-dom @6.16.0 でも警告が消えましたので、@6.7.0 固有の問題なのかも?)。
解決に向けて行ったこと
ひとまず各ページを見たのですが目ぼしい情報はあまり見つからなかったので警告文を見返してみることにしました。
- DeepL翻訳さんに聞く
remix-run/routerで作成されていない場所へのPOPナビゲーションをブロックしようとしています。このブロックは本番では静かに失敗しますが、一般的には、このような状況を避けるために、すべてのナビゲーションを(window.history.pushStateを直接使うのではなく)ルーターで行うべきです。
- すべてのナビゲーションを(window.history.pushStateを直接使うのではなく)ルーターで行うべきです。
この一文から「<a>
タグでページ内リンクしていることがだめなの?」と思い、<a>
を<Link>
に書き換えました。
書き換えてチェックしてみたところ……ページ内リンクが機能しなくなったので<a>
に戻しました orz。
次に、別のアプローチとして親コンポーネントのルーティング設定(BrowserRouter
やRoutes
、Route
のpath
やelement
部分)などをごちゃごちゃいじったりしたのですがうまくいかず、時間を浪費していきました。
試行錯誤する中で、一番初めに調べてた時に出てきたBugという文字を思い出し、
「バグなんてそうそうあるわけないし、まさか本当にそうじゃないでしょー」と思いながら ver を変えて見ました。
npm install react-router-dom@6.6.1
すると、ページ内リンク時の警告は消えて、(ブラウザバック用の)カスタムフックを使わずにブラウザバックできることも確認できました!
バグはある
しっかり時間をかけて調べたわけでないので偉そうなことは言えませんが(そもそもnpmを使わせていただいてる者ですし)、バグはあるのだなぁと思い知らされた体験でした。
さいごに
とりあえず解決したことで一安心でしたし、npmのverが不具合の原因となるケースもあるというデバック時の引き出し?知見?的なものを収穫できたことをポジティブに捉えたいと思います!
ここまでお読みいただき、ありがとうございました!