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 git@bitbucket.org: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

系统信息： Visual Studio 远程 WSL 2 上的代码 Windows11版本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: '.',
        },
      ],
    })
  ],

Webpack 5 + React Router v6 - 生成空白页

Webpack 5 + React Router v6 - Blank Page on Build

reactjs

webpack

react-router

react-router-dom

webpack-5