React网站子文件夹上的“404 Not Found”[重复]答案

【问题标题】："404 Not Found" on React website subfolders [duplicate]React网站子文件夹上的“404 Not Found”[重复]
【发布时间】：2021-07-22 11:45:48
【问题描述】：

我有一个网站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 服务器时不起作用。

我该如何解决这个问题？

【问题讨论】：

404 when trying to enter a react app route

标签： reactjs nginx webserver website-deployment

【解决方案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 页面。

附言所有功劳都归功于 Ajeet Shah 的 original answer。

【讨论】：