React Routerのチュートリアル Lesson10
前回の続き。
Lesson10 - Clean URLs with Browser History
これまで作ったアプリのURLは、ハッシュを使ったHackで成り立っています。これは常にうまく動作するデフォルトの挙動です。 しかし、もっと良い方法があります。
モダンなブラウザは、HTTPリクエストを生成することなくURLを操作することが可能です。
browserHistoryを使う
app/index.jsxを開いて、以下のように変更しましょう。
hashHistoryをbrowserHistoryに変更しただけです。
ReactDOM.render((
<Router history={browserHistory}>
これだけでクリーンなURLでアクセスすることができます。 しかしこの方法には罠があります。 何らかのリンクをクリックしたのち、ブラウザをリフレッシュしてみましょう。 すると404 Not Foundが発生するはずです。
404 Not Foundの解決方法
webpack-dev-serverの起動オプションに、--history-api-fallbackをつける。
package.jsonを開いて、以下のように変更します。
"scripts": {
"start": "webpack-dev-server --inline --content-base . --history-api-fallback",
},
scriptタグのsrcに指定しているbundle.jsのパスを変更する。
html-webpack-pluginを使っているので、webpack.config.jsを変更します。
以下のように、filenameを変更します。
output: {
path: PATHS.build,
filename: '/bundle.js'
},
まとめ
browserHistoryを使えば、クリーンなURLを使うことができる。
