时间戳

首页 > 解决方案 > React 网站子文件夹中的“404 Not Found”

reactjs - 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 服务器时不起作用。

我该如何解决这个问题？

标签： reactjsnginxwebserverwebsite-deployment

解决方案

我错了，配置是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 页面。

ps 所有的功劳都归功于 Ajeet Shah 的原始答案。

推荐阅读