概要
Amplifyのホスティング機能でSPAを公開する場合URLパラメータ(クエリストリング・クエリ文字列)を利用することが困難なケースがあるため解説いたします。
2022/7/31現在未解決です。下記issue内でも議論されていますが、Amplifyの設計思想による仕様である可能性があります。そのため今後解消されるかは不明です。
GitHubのissue
https://github.com/aws-amplify/amplify-hosting/issues/97
解説
Amplifyのホスティング機能を利用してSPAを公開した場合、ルート(/)以外へのリンクはURLパラメータが消されたうえでトップページへのリダイレクトが発生します。一方で、ルートへアクセス後のSPAのHistory APIによるページ遷移ではURLパラメータを利用できます。
そのため、ルート以外ではクエリパラメータを利用することができません。
SPAでは通常のページ遷移と異なり、単一のファイル内で仮想的にページ遷移を行います。そのため一般的にはルート以外(例:/about)へのアクセスが行われた場合、一度ルートへリダイレクトするよう設定しておき、その後パスとURLパラメータを解析しページを表示するよう設定します。
一方でAmplifyのホスティングではどう設定してもURLパラメータはリダイレクト後にクリアされてしまいます。
一時的な解決方法
別ページで処理を行いたい場合もルートへアクセスさせ、アプリケーション内でページへのリダイレクトとURLパラメータの引き渡しを行います。
私の場合はリダイレクトしたいパスをパラメータとして渡しました。
例:
# アプリ内で "/hoge-page/?name=fuga" に変換してリダイレクトする
/?path=hoge-page&name=fuga
場当たり的な対応となりますが、どうしてもURLパラメータを利用したいケースでは動作します。
対応に苦慮しましたのでどなたかの助けになればと思います。
もしより良い対応をご存知の方がいれば教えていただければ幸いです。