在heroku中尝试导航到signin路由时出现404错误

Question

我已经将mern应用程序部署到heroku，但当我试图通过输入url导航到路线时，它显示了一个404页面错误。导航栏链接工作正常，它们成功地将我导航到登录和注册页面，但当我点击注册时，表单中的登录链接。这些链接断开了，这给了我一个加载资源失败的消息：服务器的响应状态为404(未找到(。你可以在上查看我的应用程序https://fullstack-restaurant-app97.herokuapp.com/导航到时出错https://fullstack-restaurant-app97.herokuapp.com/signin或https://fullstack-restaurant-app97.herokuapp.com/signup路线。

{
"name": "backend",
"version": "1.0.0",
"description": "",
"main": "server.js",
"scripts": {
"build": "cd frontend && npm run build",
"install-frontend": "cd frontend && npm install",
"start": "node ./src/server.js",
"server": "nodemon ./src/server.js",
"frontend": "cd frontend && npm start",
"heroku-postbuild": "NPM_CONFIG_PRODUCTION=false && npm run install-frontend && npm run build"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"bcrypt": "^5.0.0",
"cors": "^2.8.5",
"dotenv": "^8.2.0",
"express": "^4.17.1",
"express-validator": "^6.6.1",
"jsonwebtoken": "^8.5.1",
"mongoose": "^5.10.0",
"multer": "^1.4.2",
"path": "^0.12.7",
"shortid": "^2.2.15"
},
"devDependencies": {
"nodemon": "^2.0.4"
}
}

App.js

import React, { useEffect } from 'react';
import {BrowserRouter as Router, Route, Switch} from 'react-router-dom';
import Signin from './containers/Signin';
import Signup from './containers/Signup';
import Home from './containers/Home';
import './App.css';
import { useDispatch, useSelector } from 'react-redux';
import { isUserLoggedIn } from './actions';
import CssBaseline from '@material-ui/core/CssBaseline';

function App() {
const dispatch = useDispatch();
const auth = useSelector(state => state.auth)
useEffect(() => {
if(!auth.authenticate){
dispatch(isUserLoggedIn())
}

}, [])
return (
<>
<CssBaseline/>
<Router>
<Route exact path="/" component={Home} />
<Route path="/signin" component={Signin} />
<Route path="/signup" component={Signup}/>    
</Router>
</>
);
}
export default App;

server.js

const express= require('express');
const app= express();
const mongoose= require('mongoose');
const env= require('dotenv').config();
const PORT= process.env.PORT || 2000;
const adminRoutes= require('./routes/admin/auth');
const restaurantRoutes= require('./routes/restaurant')
const cors= require('cors');
const path= require('path');
mongoose.connect(process.env.MONGODB_URI || `mongodb+srv://${process.env.MONGO_DB_USER}:${process.env.MONGO_DB_PASSWORD}@cluster0.e4r3t.mongodb.net/${process.env.MONGO_DB_DATABASE}?retryWrites=true&w=majority`, 
{
useNewUrlParser: true, 
useUnifiedTopology: true,
useCreateIndex:true
}).then(() => {
console.log('Database connected');
});
app.use(cors());
app.use('/public', express.static(path.join(__dirname,'uploads')));
app.use(express.json());
app.use('/api', adminRoutes);
app.use('/api', restaurantRoutes);

if(process.env.NODE_ENV=='production'){
app.use(express.static("frontend/build"))
app.get('*', (req, res) => {
res.sendFile(path.resolve(__dirname, 'frontend', 'build', 'index.html'))
})

}

app.listen(PORT, () => {
console.log(`Server is listening on port ${PORT}`);
})

我还添加了github回购的链接https://github.com/codinghamster12/fullstack-restaurant-webapp我已经试着解决这个问题好几天了，如果有人能调查一下，我将不胜感激。谢谢

Answer 1

我不能直接说这就是发生这种情况的原因。但是你可以用一个简单的方法来找出问题。导航到项目文件夹并从该位置打开cmd。然后，使用heroku login命令登录到您的heroku帐户。然后输入heroku logs -t命令，它将显示您的服务器和API调用init的状态。如果有任何错误，您可以看到红色的错误消息。然后仔细研究，你肯定可以用这种方法找到解决方案。