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应用程序中，这是不可能的

Answer 2

React在客户端运行，而Node和MongoDB在服务器端运行。您需要做的是构建或使用驻留在服务器上并通过HTTP / HTTPS消息与客户端进行通信的API。

React应用程序不能同时执行这两项操作，因为它已发送到客户端（即Web浏览器），因此无法通过Internet发出请求，而无法连接到服务器。这就是为什么API在Web开发中如此有用的原因。因此，您将需要一个附加应用程序来处理通过HTTP中的消息发送和接收数据。

一些资源可以为您提供帮助：

这是一个轻量级教程，简单介绍Medium Full Stack with Mongo and JS
Pluralsight的Full Stack JavaScript路径和课程。他们在内容上做得很好，将有助于解释许多概念。
或者LinkedIn Learning，学习也有很多资源。
YouTube是免费选项。尽管在YouTube上，您可能需要做更多的搜索才能找到适合自己兴趣的视频。

Answer 3

您好，您可以使用reactjs-express-generator

在节点中使用react作为视图

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

3 个答案: