React Routing在本地但不在Heroku中工作

Question

在这里,我的问题是非常相似的,如果不完全一样,在列出的一个这个问题.不幸的是,我无法使用它提供的策略解决它.所以这是我自己的细节:

我正在使用Create React App,React Router 4,Express和Heroku,并遵循这里有关使用CRA设置服务器的说明.

在本地,我能够访问路线,例如myapp/about,在构建和推送到heroku之后,这些404.

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

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

app.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`的快速演示提供.

??? 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

根据这篇文章的回答,我还将一个static.json文件放入根目录.

static.json

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

以上配置在任何路线上都给出了404s.

Answer 1

好吧,我想出来了.

我所需要的只是确保任何与我的内部API无关的GET请求(例如通过地址栏的请求)直接路由到我的index.html文件,该文件通过React Router处理动态路由.现在似乎已经很明显了.

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

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