IT技术 - React 网站子文件夹中的“404 Not Found” - 吾爱随笔录

我有一个网站https://georgi.karapetrov.top/

源代码：https : //github.com/GeorgiKarapetrov/georgi.karapetrov.top

问题

指向不同页面的内部链接有效。我可以单击顶部栏中的“关于”按钮并加载关于页面。此外，我被路由到“关于”页面的 URL。

但是，直接打开时不会加载https://georgi.karapetrov.top/about URL。

其余的也是如此。通过单击按钮可以访问任何“子文件夹”，但在地址栏中键入 URL 时会返回“404”未找到。

不幸的是，当我尝试访问子文件夹时，NgingX 错误日志中没有出现任何内容。我不知道我可以路由到 NginX 级别的子目录位置，因为这些子文件夹实际上并不存在于网站路径上。

该网站是一个 React 应用程序。相关代码如下所示：

import React, { Suspense, lazy } from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';

const { PUBLIC_URL } = 'https://georgi.karapetrov.top/';

const About = lazy(() => import('./pages/About'));

const App = () => (
  <BrowserRouter basename={PUBLIC_URL}>
    <Suspense fallback={<Main />}>
      <Switch>
        <Route exact path="/" component={Index} />
        <Route path="/about" component={About} />
        //etc
        <Route component={NotFound} status={404} />
      </Switch>
    </Suspense>
  </BrowserRouter>
);

export default App;

在本地主机上开发或提供生产构建时，它可以按预期工作，使用npx serve -s build. 部署到 NginX 服务器时它不起作用。

我该如何解决这个问题？