　静的なブラウザタイトルはともかく、RTK Queryのdataに依存している、といった動的なタイトルは読み込みが必要になる。今回は、「別ドメインへのURLへ遷移した時に、RTK Queryのdataに依存した、動的ブラウザタイトルを更新する」ケースへの備忘録を書いた。

　今回のケースに当てはまる条件としては、以下のように定めている。

遷移元、遷移先ともにTypescriptによって記述、かつ両方管理している
react-router v6以降を想定
遷移は関数によって行われる(aタグなどを用いない)
遷移元ではNext.js関連のライブラリを使わない

useNavigateは同ドメインのみで用いることが可能

　他のサイトでも述べられているが、useNavigateは、react-router v6において、同ドメインでのページ遷移のみに用いることができるのである。要は、別ドメインでの遷移を無理やり行うと、おかしくなってしまうのである。

https://stackoverflow.com/questions/71606230/usenavigate-navigate-to-external-link

https://reactrouter.com/en/main/hooks/use-navigate

　したがって、読み込みありの遷移方法として、次のように考える必要がある。

遷移先でRTK QueryのisLoadingを用いる

　遷移元については、(Next.jsを用いないということは)別ドメインのURLへの遷移の方法は以下のようなものを例として挙げることができる。(方法はこれだけではない)

/* 中略 */
window.location.replace(......); /* ...... に適切なURL(string)を入れる */
/* 以下中略 */

　遷移先のコードにおいては、以下のようなコードを書いておけば良いのである。

const { data, isLoading } = useGetHogeQuery(hogeId);
/* 中略 */
if(isLoading) {
    return <></>;
};
/* 中略 */
return (
<>
{/* ここにReact Helmet等ブラウザタイトル更新用のタグを含め、dataから文字列を受け取る */}
</>
);
/* 以下中略 */

　このように書くことで、RTK Queryのdataが確実にロードされるまで待つことができるので、RTK Queryのdata依存になっている動的ブラウザタイトルは更新される。

まとめ

　ポイントとしては以下の通りである。

遷移元は、通常通り別ドメインのURLに対する遷移を行う関数を使う
(window.locaiton.replaceなど)
遷移先において、RTK QueryのisLoadingを用いて、dataが更新されるまで待機する