[英]React Router working locally but not deployed on heroku
I have ran my app on localhost and everything works fine, however once I deploy on heroku the home page works correctly, but when I hit "my-app/stocks/AAPL" I get a 404. I have looked at others with the issue and added a static.json file, but that does not help.我已经在 localhost 上运行了我的应用程序,一切正常,但是一旦我在 heroku 上部署,主页就可以正常工作,但是当我点击“my-app/stocks/AAPL”时,我得到了 404。我看过其他人的问题并添加了 static.json 文件,但这无济于事。 I have pasted my code from my server.js, my folder structure, static.json, and my App.js for reference.我已从我的 server.js、我的文件夹结构、static.json 和我的 App.js 粘贴我的代码以供参考。
static.json static.json
{
"root": "client/build/",
"clean_urls": false,
"routes": {
"/**": "index.html"
}
}
server.js服务器.js
const stockRouter = require('./routes/stock')
const userRouter = require('./routes/user')
const express = require('express')
const path = require('path');
const mongoose = require('mongoose')
const cors = require('cors');
require('dotenv').config()
const app = express()
app.use(cors())
app.use(express.json())
mongoose.connect(process.env.MONGO_URI, {useNewUrlParser: true, useUnifiedTopology: true, useCreateIndex: true});
const connection = mongoose.connection
connection.on('error', console.error.bind(console, 'connection error:'));
connection.once('open', function() {
console.log('MongoDB connection successful')
});
app.use('/stock', stockRouter)
app.use('/user', userRouter)
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"));
});
app.listen(process.env.PORT || 5000, (req, res) => {
console.log('Listening')
})
app.js应用程序.js
function App() {
return (
<Router>
<ThemeProvider theme={theme}>
<div className="App">
<Container maxWidth='lg'>
<Paper style={{ backgroundColor: '#f5f6f7'}}>
<Nav></Nav>
<Route exact path='/' component={StockTabs} />
<Route exact path='/stocks/:symbol' component={StockInfo} />
</Paper>
</Container>
</div>
</ThemeProvider>
</Router>
);
}
When you hit the URL: my-app/stocks/AAPL
, the default behavior of browser is sent a request to your server and you do not have the handler for that route on your server so 404 returns.当您点击 URL: my-app/stocks/AAPL
时,浏览器的默认行为会向您的服务器发送请求,并且您的服务器上没有该路由的处理程序,因此 404 返回。
You have 2 ways to handle that case:你有两种方法来处理这种情况:
Use HashRouter
instead of BrowserRouter
, your URL should look like:使用HashRouter
而不是BrowserRouter
,您的 URL 应该如下所示:
YOUR_SERVER:PORT/#/stocks/AAPL
The # on the URL does not trigger server call and routing will be handled by client entirely. URL 上的# 不会触发服务器调用,路由将完全由客户端处理。
BrowserRouter
but it need to configure on your server, read on that post for more information: React-router urls don't work when refreshing or writing manually您仍然可以使用BrowserRouter
,但它需要在您的服务器上进行配置,请阅读该帖子以获取更多信息: React-router url 在手动刷新或写入时不起作用
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.