React Router Adds URL Query Params on POST Request

Question

Hello my fellow nerds,

I am running into an issue where when I make a POST request (using Axios library inside of React function), it automatically appends all of the data from the "Create a User" form into search parameters in the URL of the page upon submission. I don't like this because I'd rather this stay hidden within the POST request, not flung out onto the page URL.

Image: URL after user was created

This is a direct result of React Router adding the data sent in the request of the body being appended to the location.search of react router's history object. So, naturally, since the react router history object is mutable, I tried adding this to the response of the submission:

this.props.location.search.replace({*some random parameter stuff here*});

This was in hopes it would remove all of that stuff from the URL and redirect to the page without search parameters. Anyways, I have seen a few other posts similar in nature but they don't seem to answer this exact question.

TL;DR: I am trying to send a POST request without React Router adding my req.body data to the params in my URL and the location.search object.

MY CODE:

Users.js: (front end)

handleSubmit (e) {
    Axios.post(`${server}/s/admin/users/create`, {
        headers: {
            'Content-Type': 'application/json'
        },
        data: {
            firstName: this.state.firstName,
            lastName: this.state.lastName,
            username: this.state.username,
            password: this.state.password,
            email: this.state.email
        }
    }).then((res) => {
        console.log(res);
    }).catch(err => console.log(err));
}

users.js: (back end)

app.post("/s/admin/users/create", (req, res) => {
let rb = req.body.data;
let newUser = new User({
    _id: uid.time(),
    orgID: req.session.orgID,
    email: rb.email,
    username: rb.username,
    password: bcrypt.hashSync(rb.password, hashRate),
    firstName: rb.firstName,
    lastName: rb.lastName,
    data: { exist: "true" },
    settings: { exist: "true" }
});

// Save new owner to db
newUser.save((err, data) => {
    if (err) return console.error(err);
    res.json({info: `A new user, ${newUser.firstName} ${newUser.lastName}, has been created successfully.`});
});

});

Thank you!

P.S. This is my first post, thank you for your patience. I've tried searching and solving this issue for about a day now.

user_2425046 · Answer

Can you try rewriting it this way? cause axios.post expect

axios({
  method: 'post',
  url: `${server}/s/admin/users/create`,
  headers: {
    'Content-Type': 'application/json'
  },
  data: {
    firstName: this.state.firstName,
    lastName: this.state.lastName,
    username: this.state.username,
    password: this.state.password,
    email: this.state.email
  }
}).then((res) => {
  console.log(res);
}).catch(err => console.log(err));

Axios.post method expect the second argument as data but you have passed config, another way is to pass data and config in the third argument.

handleSubmit(e) {
  Axios.post(`${server}/s/admin/users/create`, {
      firstName: this.state.firstName,
      lastName: this.state.lastName,
      username: this.state.username,
      password: this.state.password,
      email: this.state.email
    }, {
      headers: {
        'Content-Type': 'application/json'
      }
    }
  }).then((res) => {
  console.log(res);
}).catch(err => console.log(err));
}

React Router Adds URL Query Params on POST Request

MY CODE:

1 Answers