React Router 在 Digital Ocean 上失败答案

【问题标题】：React Router fails on Digital OceanReact Router 在 Digital Ocean 上失败
【发布时间】：2018-10-26 20:31:25
【问题描述】：

我有一个使用 pm2 和 NGINX 在 Digital Ocean 上运行的 React 网站。入口点“/”加载得很好，但是当我尝试转到“/: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 在本地运行时，所有路由都按预期工作。

【问题讨论】：

您需要确保您的服务器为您的所有路由提供index.html 文件，以便 React Router 可以处理浏览器中的路由。

标签： reactjs nginx react-router pm2

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

除了@amem 很好的解释，在你的网络服务器配置文件中添加以下行：

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

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

【讨论】：