React应用手动访问/class/:id带参路由页面无法加载问题

开发React单页应用过程中，站内点击跳转/class/:id课程详情页正常，但手动在浏览器地址栏输入该路径访问时页面无法渲染。经开发者工具排查，此时bundle.js被错误解析为localhost:8000/class/bundle.js，资源实际正确存放路径为站点根目录下的localhost:8000/bundle.js。

涉及的路由配置代码：

<BrowserRouter>
  <Layout>
    <Route path="/" component={Home} exact={true} />
    <Route path="/signin" component={Signin} />
    <Route path="/register" component={Register} />
    <Route path="/about" component={About} />
    <Route path="/class/:id" component={Class} />
    <Route path="/class" component={Classes} exact={true} />
  </Layout>
</BrowserRouter>

异常截图：

涉及的webpack配置代码：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const InterpolateHtmlPlugin = require('interpolate-html-plugin');
const path = require('path');
module.exports = {
    mode: 'development',
    entry: "./src/index.js",
    output: {
      path: path.resolve(__dirname, "dist"),
      filename: "bundle.js",
      assetModuleFilename: "assets/[hash][ext][query]"
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                loader: 'babel-loader'
            },
            {
                test: /\.less$/,
                use: [
                    { loader: "style-loader" },
                    { loader: "css-loader" },
                    { loader: "less-loader" }
                ]
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/,
                type: "asset/resource"
            }
        ]
    },
    resolve: {
        extensions: ['.js', '.jsx'],
        alias: {
            '@': path.resolve(__dirname, 'src/'),
        }
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html',
            favicon: './public/favicon.ico',
        }),
        new InterpolateHtmlPlugin({
            PUBLIC_URL: 'http://localhost:8000/public'
        })
    ],
    devServer: {
        historyApiFallback: true,
        port: 8000,
        open: true
    },
    externals: {
        config: JSON.stringify({
            apiUrl: 'http://localhost:4000'
        })
    }
}

该异常由webpack静态资源公共路径配置缺失导致：
未配置output.publicPath时，HtmlWebpackPlugin生成的HTML文件中，静态资源默认使用相对路径引用。访问站点根路径/时，相对路径bundle.js可正确匹配根目录下的资源文件；当手动输入多级子路径/class/xxx访问时，浏览器会基于当前URL路径解析相对地址，将bundle.js解析为/class/bundle.js，与资源实际存放路径不符，JS资源加载失败后页面无法正常渲染。
此外现有InterpolateHtmlPlugin中硬编码的PUBLIC_URL值包含本地域名与public目录，后续部署到非本地环境时会直接触发资源路径错误。

• 修改webpack的output配置，新增publicPath: '/'，强制所有打包生成的静态资源引用都以站点根目录为基准路径：

output: {
  path: path.resolve(__dirname, "dist"),
  filename: "bundle.js",
  publicPath: '/', // 新增该配置
  assetModuleFilename: "assets/[hash][ext][query]"
}

• 修正InterpolateHtmlPlugin的PUBLIC_URL配置，设置为空字符串代表根路径，避免硬编码本地域名导致部署异常：

new InterpolateHtmlPlugin({
  PUBLIC_URL: ''
})

• 检查public/index.html模板文件，所有手写的静态资源引用不要使用相对路径，统一以/开头，或使用%PUBLIC_URL%前缀拼接，例如引用favicon应写为%PUBLIC_URL%/favicon.ico。
• 配置修改完成后重启webpack开发服务，再次手动输入多级路由地址访问，资源会正确从根目录加载，页面即可正常渲染。

现有devServer开启的historyApiFallback: true配置无需修改，该配置的作用是将所有前端路由请求都重定向到根目录index.html，是browserHistory路由模式下必须的配置。

内容的提问来源于stack exchange，提问作者StarDev