node.js - React Routing 在本地有效，但在 Heroku 中无效

Question

我这里的问题与 this 中概述的问题即使不完全相同也非常相似。问题。不幸的是，我无法使用它提供的策略来解决它。所以这是我自己的详细信息:

我正在使用 Create React App、React Router 4、Express 和 Heroku 并遵循了使用说明 here关于使用 CRA 设置服务器。

在本地，我能够访问诸如 myapp/about 之类的路由，但是在构建并推送到 heroku 之后，这些 404。

我可以通过 UI 导航到这条路线(即通过单击将路线推送到 history 的菜单项)，但我无法仅使用我的浏览器导航到这条路线地址栏。 此外，当我使用 UI 导航时，我没有看到任何与路线相关的网络事件，例如 /about 请求。然而，当我更改地址栏并按下回车键时，这会产生对所述路由的网络请求。

以下是我的代码中的一些精选片段:

应用.js

<Switch>
  <Route exact path="/about" component={About} />
  <Route path="/" 
    render={props => <coolListContainer {...props}/>} />
</Switch>

server.js

if (process.env.NODE_ENV === 'production') {
  app.use(express.static('client/build'));
} 

//...what some of my api routes look like:

app.route('/api/verify')
  .post( async (req, res) => {
      try {
        await db.verifyCode(req.body)
        res.json('success')
      } catch (err) {
        res.json(err);
      }
    }
  });

我的目录结构 由 full-stack-react` 的 express demo 提供.

└── myapp
    ├── Procfile
    ├── README.md
    ├── client
    │   ├── build
    │   │   ├── asset-manifest.json
    │   │   ├── index.html
    │   │   └── static
    │   │       ├── css
    │   │       │   ├── main.e8c50ca0.css
    │   │       │   └── main.e8c50ca0.css.map
    │   │       └── js
    │   │           ├── main.24fe0ebe.js
    │   │           └── main.24fe0ebe.js.map
    │   ├── package.json
    │   ├── public
    │   │   └── index.html
    │   ├── src
    │   │   ├── About.js
    │   │   └── index.js
    │   └── styles
    │       └── about..css
    ├── package.json
    ├── server.js
    └── static.json

根据对 this post 的回答，我还在根目录中放置了一个 static.json 文件。

static.json

{
  "root": "client/build/",
  "clean_urls": false,
  "routes": {
    "/**": "index.html"
  }
}

以上配置在任何路由上都会给我 404。

Answer 1

好吧，我想通了。

我所需要的只是确保任何与我的内部 API 无关的请求，例如通过地址栏的 GET 请求，都直接路由到我的 index.html 通过 React Router 处理动态路由的文件。现在看起来很明显。

这是我的 app.js 中的最终路线:

app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, '/client/build/index.html'));
});