[英]React Router Routes Don't work when deployed to Heroku
在MySQL / Sequelize中使用Node / express / React
我在这里有我的create react app app的一个分支: https : //github.com/geochanto/nutrition-calculator-react/commits/edit-recipe
我将在此处将其部署到Heroku的地方: https : //nameless-temple-93876.herokuapp.com/
在本地,后端(expressjs)和前端(React Router)路由都可以正常工作。 问题:在Heroku上,虽然后端路由有效,但只有root('/')反应路由有效。 其他路由仅给出空白页面,而不是加载各个组件:
我尝试了很多事情,火星构建包就是其中之一,但这却给出了nginx错误。
我还尝试像这样在客户端文件夹内手动设置static.json,但没有帮助:
{
"root": "build/",
"clean_urls": false,
"routes": {
"/**": "index.html"
}
}
这是我当前对App.js的配置:
App.js
const App = () =>
<Container>
<Router basename={process.env.PUBLIC_URL}>
<div>
<JumbotronComponent/>
<NavBar />
<Route path="/" component={Smoothie} />
<Route exact path="/ingredients" component={Ingredients} />
<Route exact path="/recipes" component={Recipes} />
<Route path="/users/admin" component={Admin} />
<Route path="/users/login" component={Login} />
<Route path="/users/profile" component={Profile} />
<Route path="/image" component={Imguploader} />
</div>
</Router>
</Container>
export default App;
在我的主server.js中也有这个
// Serve static content for the app from the "public" directory in the application directory.
// if production env, use build folder for static files
if (process.env.NODE_ENV === "production") {
app.use(express.static("client/build"));
}
// for local env, use /client/public folder
else {
app.use(express.static(path.join(__dirname, '/client/public')));
}
// server the client index.html file for all requests
app.get("*", function(req, res) {
res.sendFile(path.join(__dirname, "./client/public/index.html"));
});
其他相关文件:
回答我自己的问题。 也许它将帮助其他人:
我在使用/ client / public文件夹中的res.sendFile服务索引文件时遇到了一个错误。 相反,在生产环境中,我应该从/ client / build提供服务 ,如下所示:
if (process.env.NODE_ENV === "production") {
app.use(express.static("client/build"));
app.get("/*", function(req, res) {
res.sendFile(path.join(__dirname, "./client/build/index.html"));
});
}
else {
app.use(express.static(path.join(__dirname, '/client/public')));
app.get("/*", function(req, res) {
res.sendFile(path.join(__dirname, "./client/public/index.html"));
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.