API get/put error

Question

Hello, everybody!

I am studying nodejs and React. I built a little project that performs a crud with Mysql database.

The project is to show and edit employees(employees) of a company.

I can register and delete employees normally. But when I try to edit them, the following error appears:

GET http://localhost:3000/edit/api/contributors/1 404 (Not Found)

follows the application code:

*File Edit Contributor

const EditarColaborador = (props) => {

    const [name, setName] = useState('');
    const [cargo, setCargo] = useState('');
    const [setor, setSetor] = useState('');
    const [success, setSuccess] = useState(false);
    const id = props.match.params.id;

    useEffect(()=>{

        axios.get('api/colaboradores/' + id )
        .then((resposta)=>{

            setName(resposta.data.nome);
            setCargo(resposta.data.cargo);
            setSetor(resposta.data.setor);
        })

    }, [])


    const nameChange = (event) => {

        setName(event.target.value);
    }

    const cargoChange = (event) => {

        setCargo(event.target.value);
    }

    const setorChange = (event) => {

        setSetor(event.target.value);
    }

    const editaColaborador = async ()=>{

        await axios.put('api/colaboradores/editar/' + id,{

            nome:name,
            cargo:cargo,
            setor:setor
        })
        .then(()=>{
            setSuccess(true);
        })
    }

    if (success) {

        return <Redirect to='/colaboradores' />
    }

    return (

        <div className='container'>
            <br />
            <h1 id='titulo'>Editar Colaborador</h1>
            <form>
                <div className="form-group">
                    <label htmlFor="exampleInputEmail1">Nome</label>
                    <input type="text" value={name} className="form-control" id="exampleInputEmail1" onChange={nameChange} />
                </div>
                <div className="form-group">
                    <label htmlFor="exampleInputPassword1">Cargo</label>
                    <input type="text" value={cargo} className="form-control" id="exampleInputPassword1" onChange={cargoChange} />
                </div>
                <div className="form-group">
                    <label htmlFor="exampleInputPassword1">Setor</label>
                    <input type="text" value={setor} className="form-control" id="exampleInputPassword1" onChange={setorChange} />
                </div>
                <button type="button" className="btn btn-primary" onClick={editaColaborador}>Salvar</button>
            </form>
        </div>
    )
}

File that creates a row in the collaborators table

const renderizaTabela = (data) => {

        return (
            <tr key={data.id}>
                <th scope="row">{data.id}</th>
                <td>{data.nome}</td>
                <td>{data.cargo}</td>
                <td>{data.setor}</td>
                <td>
                <Link to={`/editar/${data.id}`}>Editar</Link>
                    <button type="button" className="btn btn-danger" onClick={() => deletaColaborador(data.id)}>Remover</button>
                </td>
            </tr>
        )
    }

APP file that creates routes:

function App() {
  return (

    <div className="App">
      <Router>
        <Header />
        <Switch>
          <Route path='/colaboradores' exact component={Table} />
          <Route path='/inserir' exact component={Inserir} />
          <Route path='/editar/:id' exact component={EditarColaborador} />
        </Switch>
      </Router>
    </div>
  );
}

The problem is that in the put I do to edit a contributor, the url is being rewritten by concatenating the url of the route file (In app.js) which is '/edit/:id' with the url that was passed to the Axios.put which is the same as the response of the backend which is api/collaborators/edit/:id

getting:

PUT http://localhost:3000/edit/api/contributors/edit/1 404 (Not Found)

*Archive of backend routes

const express = require('express');
const colaboradoresController = require('./Controllers/Colaboradores');

var routes = new express.Router();

routes.get('/api/colaboradores',colaboradoresController.listar);

routes.get('/api/colaboradores/:id',colaboradoresController.procurar);

routes.post('/api/colaboradores/novo', colaboradoresController.inserir);

routes.delete('/api/colaboradores/exclusao/:id',colaboradoresController.delete);

routes.put('/api/colaboradores/editar/:id',colaboradoresController.editar);

module.exports = routes;

Answer 1

by which you put, you are sending for that route in your api:

http://localhost:3000/editar/api/colaboradores/editar/1 

but looking at his api he expects this route:

/api/colaboradores/editar/:id

In other words, you’re sending the right one twice:

http://localhost:3000/api/colaboradores/editar/1