我在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 服务器时不起作用。
我该如何解决这个问题?