Webpack 5+React Router v6-构建时的空白页

Question

由于某些原因，当我使用npm run serve时，我可以很好地访问我的页面，并且路由按预期工作。然而，当我在使用npm run build时，即使我更正了资产目录，我也会遇到一个白色屏幕。我做错了什么？

// App.tsx
import { Routes, Route, BrowserRouter } from 'react-router-dom';
/**
* Application entry point.
*
* @return {JSX.Element}
*/
const App: () => JSX.Element = (): JSX.Element => {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<h1>Hello world!</h1>} />
<Route path="/add" element={<h1>Hello add!</h1>} />
</Routes>
</BrowserRouter>
);
};
export default App;

我创建了一个分离分支来隔离问题，并省去任何不必要的代码：https://bitbucket.org/blackboardd/shoppy/src/breakaway-for-router/.

如果有人想尝试运行它：

git clone -b breakaway-for-router [e-mail]:blackboardd/shoppy.git
cd shoppy
npm install
// This works fine.
npm run serve
// This has a blank white screen when the index.html file is opened, even with the asset directories corrected for local viewing.
npm run build

系统信息：远程WSL2上的Visual Studio代码Windows 11版本21H2

Answer 1

将其添加到您的package.json文件"homepage": "/"中

编辑："homepage": "./"作品

Answer 2

我有两个问题。

问题#1：错误的生产构建测试

我本应该用网络服务器来测试它的。我最终使用的是一个全局安装的serve软件包，并运行serve -s dist。这最终给了我工作路线。关于TypeScript文件，我唯一修改的是从react-router-dom导入Route和Routes，之前我是从react-router导入它们的，但我不确定这是否有任何意义。

因此，我确保要做的一件事是将这一行添加到我的webpack.prod.js文件中：

output: {
publicPath: '/',
},

问题2:/以外的路由出现404错误

然后我的重定向出现了问题。我的发行版中需要一个_redirects文件：

/* /index.html 200

我还使用copy-webpack-plugin将文件从public移动到dist。这是该部分的片段：

plugins: [
// ...
new CopyPlugin({
patterns: [
{
from: 'public/_redirects',
to: '.',
},
],
})
],