React 网站子文件夹上的“404 Not Found”

Question

我在 https://georgi.karapetrov.top/

有一个网站

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

问题

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

但是https://georgi.karapetrov.top/aboutURL直接打开是加载不出来的

其余同理。单击按钮即可访问任何“子文件夹”，但在地址栏中键入 URL 时未找到 returns“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 服务器时不起作用。

我该如何解决这个问题？

Answer 1

我错了，是NginX级别的配置

用于读取的虚拟主机配置“服务器”块：

server {
        #some config
        location / {
                try_files $uri $uri/ =404;
        }
        #etc
}

更改它解决了问题：

server {
        #some config
        location / {
                try_files $uri $uri/ /index.html;
        }
        error_page 404 =200 /index.html;
        #etc
}

现在所有页面都按预期路由。不存在的页面将发送到自定义 404 页面。

p.s。所有功劳都归功于 Ajeet Shah 的。

React 网站子文件夹上的“404 Not Found”

"404 Not Found" on React website subfolders

reactjs

nginx

webserver

website-deployment