0

I am creating a portfolio website in which I have a contact.js file which contains three input fields. After entering the data in the input fields and clicking on the submit button the data get stored in the mongodb for which the back end is in the file db.js. After clicking on the submit button it gets redirected to a page that shows the entered details. I want to be redirected to my home page (landingPage.js).

contact.js

import React, { Component } from "react";

class Contact extends Component {
  state = {};

  render() {
    return (
      <div className="container">
      <div className="row bg-contact justify-content-center">
          <div className="col-6">
            <form
              className="form-style"
              method="POST"
              action="http://localhost:2000/post-feedback"
            >
                  <h1>Hola!</h1>
                  <h4>
            {" "}
            I am based out of Delhi and will be happy to assist you with
            your request
          </h4>
          <div className="form-group">
            <label htmlFor="exampleInputEmail1">Email address</label>
            <input
              type="email"
              name="email"
              className="form-control"
              id="exampleInputEmail1"
              aria-describedby="emailHelp"
              placeholder="Enter email"
            ></input>
            <small id="emailHelp" className="form-text text-muted">
              We'll never share your email with anyone else.
            </small>
          </div>
          <div className="form-group">
            <label htmlFor="exampleInputName1">Name</label>
            <input
              type="Name"
              name="Name"
              className="form-control"
              id="exampleInputName1"
              placeholder="Name"
            ></input>
          </div>
          <div className="form-group">
            <label htmlFor="exampleFormControlMessage1">Message</label>
            <textarea
              type="message"
              name="message"
              className="form-control"
              id="exampleFormControlMessage1"
              rows="3"
            ></textarea>
          </div>

          <input type="submit" className="btn btn-dark" value="Submit" />
        </form>
      </div>
      <div className="row col-12 justify-content-center padding-custom">
        <div>
          <h2>Connect</h2>
          <div className="social pa-icon">
            <a
              href="https://www.facebook.com/gokul.rajan.140"
              target="_blank"
            >
              {" "}
              <i className="fa fa-facebook"></i>
            </a>
            <a
              href="https://www.linkedin.com/in/gokul-rajan-90a368169/"
              target="_blank"
            >
              {" "}
              <i className="fa fa-linkedin"></i>
            </a>
            <a href="#">
              {" "}
              <i className="fa fa-github"></i>
            </a>
            <a href="#">
              {" "}
              <i className="fa fa-youtube"></i>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
    );
  }
}

export default Contact;

db.js(where backend is written)

import LandingPage from "./landingPage";
var express = require("express");
var path = require("path");
var bodyParser = require("body-parser");
var mongodb = require("mongodb");

var dbConn = 
mongodb.MongoClient.connect("mongodb://localhost:27017/resume");

var app = express();
app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header(
    "Access-Control-Allow-Headers",
    "Origin, X-Requested-With, Content-Type, Accept"
  );
  next();
});

app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static(path.resolve(__dirname, 
"src/components/contact.js")));

app.post("/post-feedback", function(req, res) {
  dbConn.then(function(db) {
    delete req.body._id; // for safety reasons
    db.collection("feedbacks").insertOne(req.body);
  });
  // res.send("Data received:\n" + JSON.stringify(req.body));
  res.redirect("/landingPage"); 
});
app.get("/landingPage", function(req, res) {
  res.sendFile(__dirname + { LandingPage });
});

 app.listen(process.env.PORT || 2000, process.env.IP || "0.0.0.0");

I have already looked at How to redirect to another page after serving a post request in Node.js?

React Router v4 Redirecting on form submit

How do I include a JavaScript file in another JavaScript file?

How do I redirect to another webpage?

I have tried almost everything but I am still not redirected to landingPage.js after clicking the submit button.

cactus4
  • 114
  • 9

1 Answers1

0

You can never directly redirect from one method to another.
You can redirect form POST to POST only.