React Routing 在本地有效，但在 Heroku 中无效

Question

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

我正在使用 Create React App、React Router 4、Express 和 Heroku 并已按照有关使用 CRA 设置服务器的说明 here 进行操作。

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

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

以下是我的代码中的一些 select 片段：

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` 的 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

根据对的回答，我还将一个 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'));
});

React Routing 在本地有效，但在 Heroku 中无效

React Routing works in locally but not Heroku

heroku

node.js

express

create-react-app

react-router-v4