webpack React router v5仅在生产环境中无法使用嵌套路由

new9mtju  于 2023-08-06  发布在  Webpack
关注(0)|答案(1)|浏览(122)

我最近将HashRouter转换为BrowserRouter,因为它在开发环境中运行良好,因为我添加了

devServer: {
    historyApiFallback: true,
    allowedHosts: 'all',
  },

字符串
到webpack.dev.config
当我在prod上运行应用程序时,myapp.com可以工作,但myapp.com/home无法工作(它会呈现nginx 404错误)。
如果我去myapp.com/#/home,那么它会将我重定向到myapp.com/home,页面将呈现(我有catch all逻辑将传统哈希转换为正常的url)。
这里是我的完整的webpack配置。
webpack.common.js

module.exports = {
  entry: path.join(__dirname, 'src', 'index.js'),
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    chunkFilename: '[id].js',
    publicPath: '/',
    hashFunction: 'xxhash64',
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  module: {
    rules: [
      {
        test: /\.(scss)$/,
        use: [
          {
            // inject CSS to page
            loader: 'style-loader',
          },
          {
            // translates CSS into CommonJS modules
            loader: 'css-loader',
          },
          {
            // Run postcss actions
            loader: 'postcss-loader',
            options: {
              // `postcssOptions` is needed for postcss 8.x;
              // if you use postcss 7.x skip the key
              postcssOptions: {
                // postcss plugins, can be exported to postcss.config.js
                plugins: function () {
                  return [require('autoprefixer')]
                },
              },
            },
          },
          {
            // compiles Sass to CSS
            loader: 'sass-loader',
          },
        ],
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          },
        },
      },
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: {
              modules: {
                localIdentName: '[name]__[local]___[hash:base64:5]',
              },
              sourceMap: true,
            },
          },
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [['autoprefixer', {}]],
              },
            },
          },
        ],
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        use: [
          {
            loader: 'url-loader',
            options: { limit: 10000, name: 'static/media/[name].[hash:8].[ext]' },
          },
        ],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: __dirname + '/public/index.html',
      filename: 'index.html',
      inject: 'body',
      favicon: './public/favicon.ico',
      manifest: './public/manifest.json',
    }),
  ],
}


webpack.prod.js

module.exports = merge(common, {
  mode: 'production',
  performance: {
    hints: false,
    maxEntrypointSize: 512000,
    maxAssetSize: 512000,
  },
  plugins: [
    new Dotenv({
      path: './.env',
    }),
  ],
})


我错过了什么?

编辑

myapp.com工作,但如果我想导航到myapp.com/intro,它会给予我ngnix 404。

wnvonmuf

wnvonmuf1#

这是因为,你的路由是你的网站内部的,服务器(Nginx)不会知道为这些内部路由提供什么文件。
您的服务器知道URL“myapp.com”必须提供“index.html”,但不知道在其他URL如“myapp.com/home”的情况下提供什么文件,因此它返回“404.html”,这是默认的nginx配置。
需要在部署配置中明确提及这些路由。比如,你必须更新nginx配置,为所有以“www.example.com”开头的URL提供“index.htmlmyapp.com”
它在HashRouter中工作,因为服务器不会解析“#”之后的URL,所以对于服务器myapp.com/#/homemyapp.com/#/是相同的。服务器提供index.html,然后您的HashRouter解析'#'后的URL并相应地提供内容

相关问题