使用 url 参数刷新页面时反应路由器 404 错误

Question

我正在尝试在反应路由器 5.2.0 中使用 Url 参数，例如

    <Switch>
        <Route path="/home" component={ Home } />
        <Route path="/user/:id" component={ User } />
    </Switch >

它正在工作，但是当我在用户页面（ localhost:8080/user/1 ）上并刷新页面时，它会触发 404。我认为问题可能来自我的 webpack 配置。

如果我在 output 中添加publicPath: '/'它将工作，但应用程序无法再加载图像，它将尝试访问//assets/images/...而不是/assets/images/...

这是我的 webpack 配置：

const HtmlWebPackPlugin = require('html-webpack-plugin')
const ReactIntlPlugin = require('react-intl-webpack-plugin')
const getPublicUrlOrPath = require('react-dev-utils/getPublicUrlOrPath')
const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin')
const fs = require('fs')
const path = require('path')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

const appDirectory = fs.realpathSync(process.cwd())
const resolveApp = relativePath => path.resolve(appDirectory, relativePath)

const publicPath = getPublicUrlOrPath(
    process.env.NODE_ENV === 'development',
    require(resolveApp('package.json')).homepage,
    process.env.PUBLIC_URL
)

const publicUrl = process.env.NODE_ENV === 'development' ? publicPath + "public/assets" : ""
module.exports = {
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
            {
                test: /\.html$/,
                use: [
                    {
                        loader: "html-loader"
                    }
                ]
            },
            {
                test: /\.(png|jpg|gif|svg|ico)$/i,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[contenthash].[ext]',
                            outputPath: 'assets/img/'
                        }
                    },
                ],
            },
            {
                test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
                exclude: [/images/],
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]',
                            outputPath: 'assets/fonts/'
                        }
                    },
                ],
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    },
    output:{
        filename: 'main.[contenthash].js',
        publicPath: '/' //now I can refresh the page but assets folder is not accessible anymore
    },
    plugins: [
        new HtmlWebPackPlugin({
            template: "./public/index.html",
            filename: "./index.html",
            favicon: "./public/assets/favicon.ico"
        }),
        new ReactIntlPlugin(),
        new InterpolateHtmlPlugin(HtmlWebPackPlugin, {
            PUBLIC_URL: publicUrl,
        }),
        new CleanWebpackPlugin()
    ],
    devServer: {
        historyApiFallback: true
    }
}

谢谢你的帮助

Answer 1

我修好了它。 因此，使刷新工作的解决方案是添加webpackConfig.output.publicPath = '/'我试过但图像不再加载的原因是因为在我的代码中我以这种方式访问图像：

import Image from '../../images/image.png'

<img src={`/${Image }`} alt="Image"/>

所以我只是从src={`/${Image }`}中删除了/并且没有它正在工作，现在图像 url 看起来像/assets/images/...而不是//assets/images/...

这有点容易，但我错过了。