Ionicでルーティング先のURLを直接叩くと404になる問題の解決方法

angular Ionic

Ionic v4向けの記事です。

IonicでTab型のアプリを作る場合 ionic serve でプレビューしているときは

http://localhost:8100/tabs/tab1

と直接URL指定してもTab1の内容が表示されるのですが、 ionic buildしてwwwディレクトリをデプロイした場合は404になってしまいます。 また、本来やってはだめですがbuttonなどで飛び先をhref="/tabs/tab2"と指定した場合も404になってしまいます。 ここはちゃんと

<ion-button routerLink="/faq" routerDirection="root">FAQ</ion-button>

のようにrouteLinkを使いましょう。 ここまでやっても/tabs/tab1に直接飛ぶだけでなく、正常に開いた状態でページをリロードしても404になります。

なぜか。

Ionicはv4からルーティングがAngularに寄ってきたのですが、まだ特殊なのが必ず/index.htmlを開く前提になっているため、/tabs/tab1/index.htmlを開こうとしてしまうのです。そこで、.htaccessに下記のようにRewriteを指定してやるとうまくいきます。

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . index.html [L]
</IfModule>