时间戳

首页 > 解决方案 > 如何正确地将 React js 应用程序连接到 MongoDB 数据库

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

问题描述

我在连接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）我遇到了以下帖子，但解决错误并不是完全有用。

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

3）我还发现这个博客有助于设置连接，但仍然没有用。

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

感谢您指出解决此问题的正确方向

标签： javascriptreactjsmongodb

解决方案

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

推荐阅读