手动刷新或输入时，React-router 链接不起作用

Question

我正在使用 React-router，当我单击链接按钮时它工作正常，但是当我刷新网页时它会显示一个空的白屏。而且也没有控制台警告，所有网络调用都返回 200。

项目在本地运行时，运行良好。但是将其添加到服务器后，刷新或手动输入链接时出现白屏。

我发现，这个问题仅在第二级路径中出现。

• https://gxsports.cc/sport ----> 工作正常

• https://gxsports.cc/sport/soccer ---->刷新或手动输入时出现白屏

我使用React Router版本6，也有嵌套路由。我认为问题出在 webpack 构建上。我看到这是一个常见问题。但在每个解决方案中，都没有提到 webpack。
这是我用于生产的 webpack。

module.exports = {
    entry: path.join(__dirname, 'src', 'index.tsx'),
    plugins: [
        new HtmlWebpackPlugin({
            template: path.join(__dirname, 'public', 'index.html'),
        }),


    ],
    module: {
        rules: [
            {
                test: /\.html$/,
                use: ['html-loader'],
            },
            {
                test: /\.(tsx|ts|jsx|js)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env', ['@babel/preset-react', { 'runtime': 'automatic' }], '@babel/preset-typescript']
                    }
                }
            },
            {
                test: /\.(jpe?g|png|gif|svg|ico)$/i,
                type: 'asset/resource',
                generator: {
                    filename: 'assets/images/[name].[ext][query]',
                }
            },
        ]
    },
    resolve: {
        extensions: ['', '.ts', '.tsx', '.js', '.jsx'],
    },
    infrastructureLogging: {
        debug: [(name: string) => name.includes('webpack-dev-server')],
    },
    optimization: {
        minimize: true,
        splitChunks: {
            chunks: 'all',
        },
        usedExports: true,
        minimizer: [new TerserPlugin(
            {
                extractComments: false
            }
        )]
    },
        output: {
        path: path.resolve(__dirname, 'dist'),
        clean: true
    },
};

我尝试使用vite解决这个问题。然后效果很好。我想知道，有没有办法使用 webpack 来做到这一点？

Answer 1

您可以在 App.tsx 文件中分享您的 React Router 结构吗

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    loader: rootLoader,
    children: [
      {
        path: "team",
        element: <Team />,
        loader: teamLoader,
      },
    ],
  },
]);```

According to ReactJS official docs Router mapping should be like this.