问题描述
我的问题与问题。不幸的是,我无法使用它提供的策略来解决它。所以这是我自己的详细信息:
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中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!