snowpackで「React RouterでURL直打ちがNot Foundになる問題」を解決する方法

React RouterでURL直打ちがNot Foundになる問題

ReactによるSPAでは、まず土台となるhtml(index.html)を読み込んで、それをページ移動や操作によって書き換えることで遷移・変化を実現している。そのため、URLが直打ちされるとindex.htmlのリソースが読み込まれていないため、ページの表示ができない。

この問題を解決するには、サーバーの設定を変更して、全てのアクセスをindex.htmlでrewriteする必要がある。

解決策

snowpack.config.jsに以下を追加する。

routes: [
    /* Enable an SPA Fallback in development: */
    { "match": "routes", "src": ".*", "dest": "/index.html" },
]

snowpackのrouteには、"match": "routes"と"match": "all"がある。"match": "routes"はファイル以外(.html, .css, .jsなど)、"match": "all"は全てを（上記の設定では ）index.htmlにrewriteする。