javascript - 如何将 React js 应用程序正确连接到 MongoDB 数据库

Question

我在连接 MongoDB 数据库时遇到一些问题。使用 npm start 启动应用程序后，它将无法连接到数据库。

在有问题的代码下方。

我收到的错误出现在下面的return函数中:

function App() {
  return (
    <>    / <-- Error here
    <Navbar /> 
    </>
  );
}

在App.js代码下方:

import React from 'react';
import './App.css';
import './GoogleMap.css';
import './ProgressBar.css';
import Home from "./pages/Home";
import Vessels from "./pages/Vessels";
import SingleVessel from "./pages/SingleVessel";
import Error from "./pages/Error";
import GoogleMap from "./pages/GoogleMap";

import {Route, Switch} from "react-router-dom";
import Navbar from "./components/Navbar";

const app = express();
const express = require('express');
const mongoose = require('mongoose');
const bodyParser = require("body-parser");
const cors = require('cors');
const vesselsController = require("../controllers/VesselControllers");

require("../config/keys");

// DB Config
const db = require("../config/keys").MongoURI;

const options = {
    useNewUrlParser: true,
    reconnectTries: Number.MAX_VALUE,
    poolSize: 10
};

mongoose.connect(db, options)
.then(() => console.log('MongoDB Connection established'))
.catch((err) => console.log('Error connecting MongoDB database due to: ', err));

// Bodyparser
app.use(express.urlencoded({ extended: false }));

// Express Session
app.use(
    session({
        secret: 'secret',
        resave: true,
        saveUninitialized: true
    })
);

// Routes
const PORT = process.env.PORT || 3000; // my localhost port

app.use(bodyParser.urlencoded({extended: true, limit: '50mb'}));
app.use(bodyParser.json({limit: '50mb'}));
app.use(cors());
app.route("/vessels/all").get(vesselsController.getBaseAll);
app.route("vessels/:id/track").get(vesselsController.getCurrent);
app.route("/vessels").get(vesselsController.getHistory);
app.listen(PORT, console.log(`Server started on port ${PORT}`));

function App() {
  return (
    <>
    <Navbar /> 
      <Switch>
        <Route exact path="/" component={Home}/>
        <Route exact path="/vessels" component={Vessels}/>
        <Route exact path="/vessels/:slug" component={SingleVessel}/>
        <Route exact path="/map" component={GoogleMap} />
        <Route component={Error} />
      </Switch>
    </>
  );
}

导出默认应用程序；

到目前为止我所做的事情:

1) 我遇到了 following post但它对于解决错误并不完全有用。

2)我可以确认所有必需的模块都已安装，并且这不是缺少任何依赖项的错误。

3) 我还找到了this blog这有助于设置连接，但仍然不起作用。

4) 我还可以确认我根据 MongoDB 的官方文档正确设置了我试图存储在数据库中的变量 Schema

感谢您为解决此问题指明了正确的方向

Answer 1

看起来您正在尝试将节点应用程序执行到 React 应用程序中，这是不可能的