Question

我的问题非常相似，如果与this问题中列出的问题不完全相同。不幸的是，我还没有能够使用它提供的策略解决它。所以这是我自己的细节：

我正在使用创建React应用， React路由器4 ， Express 和 Heroku 并遵循有关使用CRA设置服务器的说明here。

在本地，我可以访问myapp/about之类的路线，但在构建并推送到heroku后，这些404.

我可以通过用户界面导航到此路线（即点击将路线推到history上的菜单项），但仅使用我的浏览器无法导航到此路线＆＃39;地址栏。此外，当我使用用户界面导航时，我没有看到任何与路线相关的网络活动，例如/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`＆＃39; 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"
  }
}

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

Answer 1

好吧，我想通了。

我需要的是确保任何与我的内部API无关的请求（例如通过地址栏的GET请求）直接路由到我的index.html文件，该文件通过地址处理动态路由反应路由器。现在似乎很明显了。

以下是app.js中的最终路线：

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

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

1 个答案: