'React Axios Post Always return Cannot post

Well my problem its that always that i send the login info to the backend, react return me Cannot Post /login. The problem its that i have a res.redirect to the main page but it dosent work and i dont know if its an error of Axios or the controller, because the information arrives correctly. What do you think? What issue im having?

React Login

import React, {Component} from "react";
import "./user.css"
import Api from "../Instrumentos/apiInstrumentos"
import { withRouter } from "react-router";

class User extends Component {
constructor(props){
    super(props);
    this.state = {
        user: []
    }
};

async componentDidMount(){
    try{
        console.log()
        const id = this.props.match.params.id;
        
        let user = await fetch(`http://localhost:5000/user/${id}`).then(response =>         
response.json())
        
        this.setState({
            user: user               
        });

        console.log(this.state.user)

    }
    catch(error){
        console.log(error);
    }
}
render(){
    let user = this.state.user
    return (
        <section id="user-detail">
            <section id="user_saved">
                <article>
                    <figure id="user_figure">
                        <img src={`http://localhost:5000${user.photo}`} />
                    </figure>
                    <h3 id="bienvenido_user">Bienvenido {user.nombre}</h3>
                    <form className="margin-sections">
                        <fieldset>
                            <input type="text" name="" placeholder={user.nombre}     
 className="input-profile"></input>
                        </fieldset>
                        <fieldset>
                            <input type="text" name="apellido" placeholder={user.apellido} 
 className="input-profile"></input>
                        </fieldset>
                        <fieldset>
                            <input type="password" name="password" placeholder={user.password}     
 className="input-profile"></input>
                        </fieldset>
                        <fieldset>
                            <button className="button-login button-detail" 
 type="submit">Enviar</button>
                        </fieldset>
                    </form>
                </article>
                    <article>
                        <h3 id="Instrumentos_guardados">Instrumentos Guardados</h3>
                        <Api />
                    </article>
            </section>
        </section>
    );
    }
 }

useForm Hook

import {useState} from 'react';
import Axios from 'axios';


export const useForm = (initialForm, validateForm) => {
const [form, setForm] = useState(initialForm);
const [errors, setErrors] = useState({});
const [loading,] = useState(false);
const [response,] = useState(null);

const handleChange = (e) => {
    const { name,value } = e.target;

    setForm({
        ...form,
        [name]: value
    });
};

const handleBlur = (e) => {
    handleChange(e);
    setErrors(validateForm(form));
};

const handleSubmit = (e) => {
    setErrors(validateForm(form));
    Axios
    .post('http://localhost:5000/usuarios/login', form)
    .then(response => {
        console.log(response)
        })
    .then(data => console.log(data))
        .catch(error => {
            console.log(error)
        })

};

return {
    form,
    errors,
    loading,
    response,
    handleChange,
    handleBlur,
    handleSubmit
};

}

Backend Controller

const main = {

acceso: async (req, res) => {
    console.log(req.body)

    return res.redirect("http://localhost:3000")

}
}

Backend Routes

const express = require('express');
const router = express.Router();
const path = require("path");
const fs = require("fs");
const user = require("../controllers/user");
const multer = require("multer");


// ************ Multer ************

const dest = multer.diskStorage({
destination: function (req, file, cb) {
    let dir = path.resolve(__dirname,"../../public/uploads","users",     
String(req.body.nombre).trim().replace(/\s+/g, ''))
    if (!fs.existsSync(dir)){
        fs.mkdirSync(dir);
    }
    cb(null, dir)
},
filename: function (req, file, cb) {
    cb(null, file.fieldname + '-' + Date.now()+ path.extname(file.originalname))
}
})

const upload = multer({storage:dest});


// ************ Routes ************

router.post("/login", user.acceso)
router.post('/guardar', upload.single("file") , user.post)

module.exports = router;

/*** Entry Point ***/
Entry point Route definition

const users = require("./routes/user");

app.use("/usuarios", users);

/*** Console.log  ***/   

Console.log Response { email: '[email protected]', password: '12345' }

From now thanks for all and have a great weekend!



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source