React Routing工作在本地而不是Heroku

如果这个问题与本文所概述的不完全一样，我的问题就非常相似。 不幸的是，我无法使用它提供的策略来解决它。 所以这里是我自己的细节：

我正在使用创buildReact应用程序 ， 反应路由器4 ， Express和Heroku，并按照这里的说明build立与CRA的服务器。

在本地，我可以访问诸如myapp/about路线，但在build立并推送到heroku之后，这些404。

我可以通过UI导航到这条路线（例如，通过点击将路线推入history的菜单项），但是仅使用浏览器的地址栏无法导航到此路线。 此外，当我使用用户界面进行导航时，我没有看到与路线相关的任何networking活动，例如/about请求。 然而，当我改变地址栏，然后按回车，这产生了一个networking请求到上述路线。

以下是我的代码中的一些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`的快速演示提供 。

 └── 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" } } 

上面的configuration给我在任何路线上的404s。

Answer 1

好吧，我明白了这一点。

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

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

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