/myproject/#/home
みたいなの
FlutterでWebアプリを実行した時、「#」付きのURLが見られます。この「#」は一体何を意味しているのでしょうか?
クライアントサイドルーティング
Flutter Webはデフォルトで「クライアントサイドルーティング(SPA)」を採用しています。SPAでは、リンクにアクセスされた際、アプリ内で処理を行いサーバは常にindex.html
を返します。なのでSPAの利点として、新たにHTMLファイルを読み込む必要がない分、早く動作することが挙げられます。
逆に、サーバが該当ページのHTMLを返すものは、クライアントサイドルーティングと言います。
/#/は必要か
Flutterのルーティングに#を付けるHashモードの利点はなんでしょうか?
先のSPAを実現するためには、ホスティングしているサーバ側がすべてのリクエストに対して常にindex.html
を返す設定を行う必要があります。
もし、Hashモードではなくサーバ側の設定がない場合はどうなるでしょうか?
たとえば、初回 /myproject/
にアクセスして、クライアント側で /myproject/home
が表示されていたとします。この状態でページをリロードすると、ブラウザは/myproject/home
に対して直接HTTPリクエストを送ります。
だがしかし、サーバ側には /myproject/home
に対応するHTMLが存在しないため、404 Not Found エラーが返ってきてしまいます。
そこで、パスベースではなくHashモードにすることで、#より前だけがサーバに送られ、#以降はクライアント側でのみ解釈されます。よって、ブラウザとサーバに対して適切なルーティングを行うことができます。
結論
したがって、サーバにSPA用の設定をしていない場合や、GitHub Pagesのようにサーバ設定を変更できないホスティング環境では、Hashモードを使用する必要があります。