0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

URLパスに出てくる「#」について【HashRouter】【SPA】【Flutter】

Posted at

/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モードを使用する必要があります。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?