我正在使用 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 来做到这一点?
您可以在 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.