React 应用程序在部署到 heroku 时返回 HTTP 错误 404

Question

我正在构建一个在本地运行良好的 React 应用程序，但是当我部署到 heroku 时，浏览器返回 404 not found 错误。 heroku 日志显示它没有在“/”处找到要呈现的任何内容

2022-10-30T12:53:49.067388+00:00 heroku[router]: at=info method=GET path="/" host=agile-springs-04238.herokuapp.com request_id=63c0c0ba-dcc6-42f2-8242-e85fcb7ff6ae fwd="66.45.129.177" dyno=web.1 connect=0ms service=1ms status=404 bytes=178 protocol=https

客户端的 APP.js 定义了一个“/”路由：

import React, { useState } from "react";
import NavBar from "./components/Header";
import Home from "./pages/Home";
import SignUp from "./pages/SignUp";
import Login from "./pages/Login";
import SingleMovie from "./pages/SingleMovie";
import SingleShow from "./pages/SingleShow";
import Dashboard from "./pages/Dashboard";
import SearchBar from "./components/SearchBar";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

function App() {
  return (
    <Router>
      <NavBar />
      <SearchBar />
      <div className="">
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/movieid/:id" element={<SingleMovie />} />
          <Route path="/showid/:id" element={<SingleShow />} />
          <Route path="/dashboard/:username" element={<Dashboard />} />
          <Route path="/signup" element={<SignUp />} />
          <Route path="/login" element={<Login />} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

没有浏览器路由呈现，但所有 API 路由仍然有效。 这似乎只是一个客户端问题。

我认为这一定是我的 server.js 中的代码问题，但对我来说它看起来是正确的。

服务器.js：

const express = require("express");
const routes = require("./controllers");
require("dotenv").config();
const PORT = process.env.PORT || 3001;
const path = require("path");
const sequelize = require("./config/connection");
const app = express();
const cors = require("cors");
const corsOptions = {
  origin: [
    "http://localhost:3000",
    "https://agile-springs-04238.herokuapp.com/",
  ],
  credentials: true, //access-control-allow-credentials:true
  optionSuccessStatus: 200,
};
app.use(cors(corsOptions));

app.use(express.json());
app.use(express.urlencoded({ extended: true }));


app.use(routes);

if (process.env.NODE_ENV === "production") {
  app.use(express.static(path.join(__dirname, "../client/build")));
}

app.get("/*", (req, res) => {
  res.sendFile(path.join(__dirname, "../client/build/index.html"));
});

sequelize.sync({ force: false }).then(() => {
  app.listen(PORT, () => console.log(`Now Listening on ${PORT}`));
});

所以我想可能是 package.json 脚本错误。 但看起来构建脚本应该在那里。

根 package.json：

  "name": "naimdbv2",
  "version": "1.0.0",
  "main": "server/server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server/server.js",
    "dev": "concurrently \"cd server && npm run watch\" \"cd client && npm start\"",
    "install": "cd server && npm i && cd ../client && npm i",
    "seed": "cd server && npm run seed",
    "build": "cd client && npm run build",
    "watch": "webpack --watch --progress"
  },

我还没有找到任何以前能够提供帮助的答案。 似乎 heroku 在部署后找不到客户端构建，但我不明白为什么。 我以前从未遇到过这个问题。

Answer 1

解决方案：经过大量的查找和反复试验，我认为我会发布对我有用的解决方案。 所以在我的例子中，问题是我在我的 React JSX 中使用<a>标签链接到其他 React Router 页面，而不是使用来自 react-router-dom 的<Link>标签。 我相信这是将请求发送到服务器端路由，而不是在客户端使用 React Router。 我希望这可以帮助其他可能遇到相同问题的人节省一些时间。