🔖
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する。
Discussion