React-routerでBrowserRouterを使用してジャンプした後、404の問題の解決をリフレッシュ(day 02)
1279 ワード
問題の導入
reactルーティングのbrowserRouterはh 5 history APIの高次ルーティングコンポーネントを使用しており、UIインタフェースとURLが同期していることを保証しています.しかし、ページをリフレッシュすると404が見つからないという欠点があります.ローカル開発のwebpackは、メモリからリソースbrowserRouterを読み出して実際に導入されたファイルが見つからないためです.つまり、サーバのルートディレクトリのindexファイルにアクセスしてデータレンダリングページを返す必要がありますが、browserモードではサーバのルート以外のパスにリクエストが送信されているため、ページが見つかりません.
ソリューション1:
HashRouterを使ってジャンプしますが、urlには#号が付いていて、あまり美しくありません.
ソリューション2:
Webpackのプロファイルを変更します.主にhistoryApiFallbackを構成します.これにより、ジャンプ後に現在のページをリフレッシュしても404は表示されません.
ソリューション3:
サーバで設定できます.アクセスパスがルート以外のパスは、ルートの下にあるindexです.htmlはブラウザに送信され、ブラウザがページを見つけることができるようにします.
reactルーティングのbrowserRouterはh 5 history APIの高次ルーティングコンポーネントを使用しており、UIインタフェースとURLが同期していることを保証しています.しかし、ページをリフレッシュすると404が見つからないという欠点があります.ローカル開発のwebpackは、メモリからリソースbrowserRouterを読み出して実際に導入されたファイルが見つからないためです.つまり、サーバのルートディレクトリのindexファイルにアクセスしてデータレンダリングページを返す必要がありますが、browserモードではサーバのルート以外のパスにリクエストが送信されているため、ページが見つかりません.
ソリューション1:
HashRouterを使ってジャンプしますが、urlには#号が付いていて、あまり美しくありません.
ソリューション2:
Webpackのプロファイルを変更します.主にhistoryApiFallbackを構成します.これにより、ジャンプ後に現在のページをリフレッシュしても404は表示されません.
devServer: {
clientLogLevel: 'warning',
historyApiFallback: {
rewrites: [
{ from: /.*/, to: path.posix.join(config.dev.assertPublicPath,'index.html') },
],
},
hot: true,
contentBase: false, // since we use CopyWebpackPlugin.
compress: true,
open:true,
port:config.dev.port,
},
plugins: [
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.dev.assetsSubDirectory,
ignore: ['.*']
}
])
]
ソリューション3:
サーバで設定できます.アクセスパスがルート以外のパスは、ルートの下にあるindexです.htmlはブラウザに送信され、ブラウザがページを見つけることができるようにします.