React-Router и Express -Router конфликтуют - PullRequest
Новая
       25

React-Router и Express -Router конфликтуют

0 голосов
/ 10 апреля 2020

Я застрял на одной проблеме, когда нажимаю api post-запрос от реактивного приложения к express серверу.

Возник конфликт между маршрутами.

При отправке почтового запроса на вкладке сети браузера enter image description here публикация прошла успешно, но запрос продолжает загружаться. в чем могут быть причины?

класс маршрутизации приложения, App.jsx 

return (
<div className="item-main-container">
  <Header data={resumeData.main} />
  <Switch>
    <Route exact path='/' render={ () => <About data={resumeData.main}/> }/>
    <Route path='/contact' render={ () => <Contact data={resumeData.main}/> }/>
  </Switch>
  <Footer data={resumeData.main} />
</div>
);

метод действия клиента приложения: 

export const submitForm = (data: resumeDataType["formData"]) => {
return async (dispatch: any) => {
    try{
        const response = await axios.post('/api/sendMail', data);
        dispatch({ type: EMAIL_SENT_SUCCESS, payload: response });
    } catch {
        dispatch({ type: EMAIL_SENT_ERROR });
    }
 }
}

express индекс сервера. js

const express = require('express');
const app = express();
const route = require("./route");
const cors = require("cors");

const port = process.env.PORT || 3001;
app.use(cors());
app.use("/api", route);

app.post("*", (req, res, next) => {
  console.log('post all request');
});

app.listen(port,  () => {
  console.log( `Server Running at ${port}`);
});

серверный маршрут. js

const express = require('express');
const mailer = require("nodemailer");

const router = express.Router();
router.use(express.urlencoded({ extended: true }));
router.use(express.json());

router.post("/sendMail", (req, res) => {
const data = req.body;

const smtpTransport = mailer.createTransport({
    service: "Gmail",
    port: 587,
    auth: {
        user: "gmail-username",
        pass: "gmail-password"
    }
});

var mail = {
    from: data.contactEmail,
    to: "sushilpearl13@gmail.com",
    subject: data.contactSubject,
    html: `<p>${data.contactName}</p>
          <p>${data.contactEmail}</p>
          <p>${data.contactMessage}</p>`
};

smtpTransport.sendMail(mail, function(error, response) {
    if(error) {
        console.log(error)
        res.send(error);
    } else {
        console.log( "email sent successfully");
        res.send('Success');
    }
  });
  smtpTransport.close();
 });

 module.exports = router;

1 Ответ

1 голос
/ 10 апреля 2020

Вы должны запретить действие по умолчанию при отправке формы в реакции, которое вызывает перезагрузку страницы. Попробуйте e.preventDefault ()

...