React Routing在本地工作，但不在Heroku中 [英] React Routing works in locally but not Heroku
问题描述
我的问题与此问题。不幸的是，我无法使用它提供的策略来解决它。所以这是我自己的详细信息：
My issue here is incredibly similar if not exactly the same as the one outlined in this issue. Unfortunately, I haven't been able to resolve it using the strategy it provides. So here are my own details:
我正在使用 Create React App ， React Router 4 ， Express 和 Heroku ，并按照此处的说明进行操作关于使用CRA设置服务器。
I am using Create React App, React Router 4, Express, and Heroku and have followed the instructions here with regards to setting up a server with CRA.
在本地，我可以访问诸如 myapp / about 之类的路线，但是在构建并推送到heroku之后，这些404。
Locally, I am able to access routes such as myapp/about, yet after building and pushing to heroku, these 404.
我可以通过UI导航至该路线（即，单击将路线推入 history的菜单项），但无法仅使用浏览器的地址栏导航到该路由。此外，当我使用UI导航时，没有看到任何与该路由相关的网络活动，例如作为 / about 请求。但是，当我更改地址栏并按Enter键时，这将向该路由生成网络请求。
I can navigate to this route via the UI (i.e. by clicking on a menu item that pushes a route onto history), yet am unable to navigate to this route using only my browser's address bar. Furthermore, when I navigate using the UI, I'm not seeing any network activity related to the route such as an /about request. Yet when I change the address bar and hit enter, this yields a network request to said route.
以下是我代码中的一些精选代码段：
Here are some select snippets from my code:
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提供表达演示。
My directory structure as provided by full-stack-react`'s 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 文件放入了根目录。
Per answer given to this post, I've also plopped a static.json file into the root directory.
static.json
{
"root": "client/build/",
"clean_urls": false,
"routes": {
"/**": "index.html"
}
}
以上配置为我提供了404s路线。
The above configuration gives me 404s on any route.
推荐答案
好的，我知道了。
我需要做的就是确保与我的内部API不相关的任何请求，例如通过 GET 请求地址栏直接路由到我的 index.html 文件，该文件通过React Router处理动态路由。
All I needed was to ensure that any request not relevant for my internal API, such as a GET request via the address bar, is routed directly to my index.html file which handles the dynamic routing via React Router. Seems obvious enough now.
这是我 app.js 的最后一条路线：
Here is the final route in my app.js:
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, '/client/build/index.html'));
});
这篇关于React Routing在本地工作，但不在Heroku中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
