react-routerを使いSPAの構成でcreateBrowserHistory
を設定し、
browser-syncのserverを起動して開発しているとreloadをしたタイミングで、
cannot get XXX
と怒られてしまいます。
これはhistoryによって構築された擬似的なURLで再ロードした場合に、
対象のファイルが存在しておらずhtmlの取得自体に失敗してエラーになっているので正しい動作と言えます。
この動きをエラーとさせずいい感じに動かすためには、
browser-syncのmiddleware
を以下の様に設定する事で簡単に対応可能です。
// ES6
const index_file = fs.readFileSync(path.join(__dirname, "./public/index.html"), "UTF-8");
browserSync.init({
server: {
baseDir: ".",
// 存在しないURLを実行された場合でもindex.htmlの内容を描画する(F5などの対応)
// CSSなども同一パスであればその辺は微調整が必要
middleware: [(req, res, next) => /^\/(public)\/.+/.test(req.url) ?
res.end(index_file) : next()
]
}
});
大体これでうまくいっている感じな気がします。