Question

我有一个使用React在PM2和NGINX上在Digital Ocean上运行的网站。入口点“ /”可以很好地加载，但是当我尝试转到“ /：username”路由时，只会得到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

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

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

但是，当您到达诸如“ myapp.com/some-page”之类的子地址时，这将使服务器尝试并提供一个名为“ myapp.com/some-page”的实际目录，而不是您的{{1} }文件，您显然需要运行该应用程序，并且由于该目录不存在，它将引发404错误。

要解决此问题，您需要重新配置服务器，以便在发生404错误的情况下（而不是失败）它返回您的index.html文件；这样，您的代码将被加载，基础框架将处理路由以显示正确的页面。

Answer 2

除了@amem好的解释之外，还将以下行添加到您的Web服务器配置文件中：

对于NGINX，添加error_page 404 /index.html;

对于Apache，将ErrorDocument 404 /index.html添加到您的.htaccess中

React Router在Digital Ocean上失败

2 个答案: