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は表示されません.
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はブラウザに送信され、ブラウザがページを見つけることができるようにします.