React Router 在 Digital Ocean 上失败

Question

我有一个用 React 制作的网站，在 Digital Ocean 上运行 pm2 和 NGINX。入口点“/”加载得很好，但是当我尝试转到“/：用户名”路线时，我只是得到 404 Not Found。我的路由在 App.jsx 中定义如下：

<Switch>
     <Route
            exact path='/'
            render={
              routeProps => <Front {...routeProps} />
            }
          />
          <Route
            path='/:username'
            render={
              routeProps => <Profile handleSignOut={ this.handleSignOut } {...routeProps} />
            }
          />
        </Switch>

index.js 有以下代码：

ReactDOM.render(<BrowserRouter>
                  <App />
                </BrowserRouter>,
                 document.getElementById('root')
 )

当在本地运行时，这些路由都按预期工作npm run start。

Answer 1

对于在 Digital Ocean 上的应用程序平台上托管的反应应用程序。

幸运的是，您现在可以通过 UI 启用它。请按照以下步骤操作，应该可以解决问题。

使用云面板 UI：登录并单击应用程序 > 设置 >> 单击组件​​名称 > 向下滚动到自定义页面 > 编辑自定义页面并选择 Catchall > 在页面名称块中输入 index.html > 保存

干杯，阿林泽山

Answer 2

对于使用不同框架（如 React 或 Angular）编写的单页应用程序来说，这是一个非常常见的问题。

不过，这个问题与框架无关。相反，它在于浏览器内路由的机制。它实际上不是真正的路由。当您打开单页应用程序时，index.html会提供一个简单的文件，当您在应用程序内部导航时，框架会负责渲染新页面并伪造导航事件（以便将其记录在浏览器历史记录和历史记录中）。网址已更改）。

但是，当您到达子地址（例如“myapp.com/some-page”）时，这将使服务器尝试提供名为“myapp.com/some-page”的实际目录，而不是您的index.html文件，您显然需要该文件运行应用程序，由于该目录不存在，因此会抛出 404 错误。

要解决此问题，您需要重新配置服务器，以便在出现 404 错误时，它不会失败，而是返回您的index.html文件；这样您的代码将被加载，底层框架将处理路由以显示正确的页面。