一秒钟后，反应组件在 heroku 上消失

Question

我的网站是https://swiftdeskph.herokuapp.com/当您访问我的网站时，它会显示该组件一秒钟然后它是空的

我的观察/问题：

1. 访问任何未指定的路由显示我的 Error404 组件就好了。
2. 即使我的 api 调用出现错误，它也应该返回并在组件中显示错误。 这是我的开发服务器上发生的事情。
3. heroku 日志没有错误
4. 如果我重写我的 server.js 并放

app.get("/", (req, res) => {

    res.sendFile(path.resolve(__dirname, "client", "build", "index.html"));
  });

整个应用程序运行良好，但只有当您从“/”路由开始访问时才会运行。

应用程序.js

import React, { useEffect } from "react";
import { useDispatch } from "react-redux";
import "./sass/App.scss";
import "bootstrap/dist/css/bootstrap.min.css";
import { Route, BrowserRouter as Router, Switch } from "react-router-dom";

// COMPONENTS---------------------------------------
import Navbar from "./components/NavbarComponent";
import Footer from "./components/Footer";
import Dashboard from "./components/Dashboard/Dashboard";
import { Orders } from "./components/Orders/Orders";
import UserInventory from "./components/UserInventory/UserInventory";
import Error404 from "./components/Error404";

//Import fetch actions
import { fetchProducts } from "./redux/userInventory/inventoryActions";
import { fetchOrder } from "./redux/order/orderActions";

function App() {
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(fetchOrder());
    dispatch(fetchProducts());
  }, []);

  return (
    <React.Fragment>
      <Router>
        <Navbar />
        <div className="appContainer">
          <Switch>
            <Route path="/" exact component={Dashboard} />
            <Route path="/orders" component={Orders} />
            <Route path="/inventory" component={UserInventory} />
            <Route path="*" component={Error404} />
          </Switch>
        </div>
      </Router>
      <Footer />
    </React.Fragment>
  );
}

export default App;

服务器.js

const express = require("express");
const mongoose = require("mongoose");
const cors = require("cors");
require("dotenv").config();

const app = express();
const PORT = process.env.PORT || 80;
const { MONGO_URI } = require("./config/keys");
const connection = mongoose.connection;

app.use(cors());
app.use(express.json());

mongoose.connect(MONGO_URI, {
  useNewUrlParser: true,
  useUnifiedTopology: true,
  useCreateIndex: true,
  useFindAndModify: false,
});

connection.once("open", () => {
  console.log("MongoDB database connection established successfully.");
});

if (process.env.NODE_ENV == "production") {
  app.use(express.static("client/build"));

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

//ADDING OF ROUTES
const products = require("./routes/products");
const userInventory = require("./routes/userInventory");
const transactions = require(".//routes/transactions");
app.use("/api/products", products);
app.use("/api/user/inventory", userInventory);
app.use("/api/transactions", transactions);

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

Answer 1

如果你看看你的控制台，你会得到这个

看起来您在订单上调用 map，其中订单不是数组。 它可能是 null/undefined/object/value 类型。

查看 DashboardOrders.jsx

Answer 2

问题修复。 由于问题与路线冲突，我只是手动编码路线。

if (process.env.NODE_ENV == "production") {
  app.use(express.static("client/build"));

  const path = require("path");
  app.get("/", (req, res) => {
    res.sendFile(path.resolve(__dirname, "client", "build", "index.html"));
  });
  app.get("/orders", (req, res) => {
    res.sendFile(path.resolve(__dirname, "client", "build", "index.html"));
  });
  app.get("/inventory", (req, res) => {
    res.sendFile(path.resolve(__dirname, "client", "build", "index.html"));
  });
}