I am having trouble navigating to the right path after editing a form in React. The web page refreshes and logs me out of the site despite having no error when updating. The console has this error:

Failed to load resource: the server responded with a status of 404 (Not Found)

Here is my front end code:

import React, {useContext, useState, useEffect} from 'react'
import { UserContext, UserTypeContext } from '../Helper/Context';
import { Form, Button, Card } from 'react-bootstrap';
import Axios from 'axios';
import { useHistory } from 'react-router-dom';

function LecturerEditProject(){

    const history = useHistory();

    const {userId, setUserId} = useContext(UserContext);
    const {type, isUserType} = useContext(UserTypeContext);

    const [projectCode, setProjectCode] = useState("");
    const [projectTitle, setProjectTitle] = useState("");
    const [projectInformation, setProjectInformation] = useState("");
    const [collaboratorId, setCollaboratorId] = useState("");

const updateProject = () => {

        Axios.put(`http://localhost:3001/lecteditproject/${projectCode}`,{
                projectId: projectCode,
                projectTitle: projectTitle,
                projectInformation: projectInformation,
                collaboratorId: collaboratorId,
        }).then((response) => {
                if(response){
                    window.alert('Your project has been updated!');
                    history.push(`/lecturer/${userId}/yourproject`);
                }
                else{
                    window.alert('Update is unsuccessful!');
                }
            })
    }

return(
        <div className="d-flex justify-content-center">
            <Card style={{ width: '70%' }}>
            <Form onSubmit = {updateProject} className = "m-3 p-5">
            <h3>Edit Project</h3>
            <hr/>
            
            <Form.Group className="mb-3" controlId="projectTitle">
            <Form.Label>Project Title</Form.Label>
              <Form.Control type="text" placeholder="Enter your project title here"  
                  onChange = {(event) => {
                    setProjectTitle(event.target.value);
                  }}
                  defaultValue = {projectTitle}
                />
            </Form.Group>
            
            <Form.Group className="mb-3" controlId="projectInformation">
            <Form.Label>Project Information</Form.Label>
                <Form.Control as="textarea" rows={3} placeholder="Enter your project information here"  
                  onChange = {(event) => {
                    setProjectInformation(event.target.value);
                  }}
                    defaultValue = {projectInformation}
                />
            </Form.Group>

            <Form.Group className="mb-3" controlId="projectCollaborator">
                    <Form.Label>Collaborator</Form.Label>
                    <Form.Control type="text" placeholder="Enter your project collaborator ID here"  
                        onChange = {(event) => {
                            setCollaboratorId(event.target.value);
                        }}

                    />
            </Form.Group>
            


            <div className = "d-flex flex-end  justify-content-end align-items-end mt-3">
            <Button className = "d-flex flex-end justify-content-end align-items-end" variant="primary" type="submit">
                Update
            </Button>
          </div>

          </Form>
          </Card>
        </div>
)

My Node.js Axios put request is as below:

app.put("/lecteditproject/:projectid", (req,res) => {

    // upload.single('userImage')
        const projectId = req.body.projectId;
        const projectTitle = req.body.projectTitle;
        const projectInformation = req.body.projectInformation;
        const collaboratorId = req.body.collaboratorId;


        try{
            const updateProject = "UPDATE project SET project_title = ?, project_information = ?, representative_id = ? WHERE project_id = ?;"

            db.query(updateProject, [projectTitle, projectInformation, collaboratorId, projectId], (err, result) => {


                if(err){
                    console.log("Error: ", err);
                }
                else{
                    res.send(result);
                }
                
            })

        }
        catch(err){
            console.log(err);
        }

    
}
) 

Anyone can please, please help me with this problem? I have been stuck on this part for days. The update is successful but it logs me out. Thank you.

CodePudding user response：

Why page reload is the default behavior of the form tag you have to prevent that default behavior by doing this this event.preventDefault(); in updateProject function this will revolve you refresh issue now see that you get the response from the API still not then I suggest try checking with postman that you get a response or not

  const updateProject = async (event) => {
    event.preventDefault();
    try {
      const res = await Axios.put(
        `http://localhost:3001/lecteditproject/${projectCode}`,
        {
          projectId: projectCode,
          projectTitle: projectTitle,
          projectInformation: projectInformation,
          collaboratorId: collaboratorId,
        }
      );
      window.alert("Your project has been updated!");
      history.push(`/lecturer/${userId}/yourproject`);
    } catch (error) {
      console.log(error);
      window.alert("Update is unsuccessful!");
    }
  };