React Router: login post - authentication

Question

I'm a beginner with React & Router and I'm trying to set up a very simple login form & redirection.
I don't really understand where i have to put my 'logic code' (an ajax call and a redirection).
This is what I get when I try to login..
GET security/login?callback=jQuery33102958950754760552_1525660032193&format=json&_=1525660032194 40 5()
It should be "POST" not "GET"
Here is what I've write.
import React from "react";
import { Link } from "react-router-dom";
import $ from "jquery";
class Login extends React.Component {
constructor(props) {
super(props);
this.state = {
userid: "",
password: "",
submitted: false
}
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(e) {
e.preventDefault();
var root = 'security/login';
//var userid = $("#userid").val();
// var password = $("#password").val();
var formData = {
"userId" : $('input[name=userid]').val(),//$('input[name=userid]').val()
"password" : $('input[name=password]').val()//$('input[name=password]').val()
};
var jsondata = JSON.stringify(formData);
console.log(jsondata);
alert("test" +jsondata);
$.ajax({
url: root,
method: 'POST',
data: {
format: 'json'
},
contentType : "application/json; charset=utf-8",
error: function() {
$('#info').html('<p>An error has occurred</p>');
},
headers: {
'Content-Type': 'application/json', /*or whatever type is relevant */
'Accept': 'application/json' /* ditto */
},
dataType: 'jsonp',
encode : true,
success: function(data, response) {
alert(+data.status.message);
var $title = $('<h1>').text(data.talks[0].talk_title);
var $description = $('<p>').text(data.talks[0].talk_description);
$('#info')
.append($title)
.append($description);
}
});
//done(Login.function(data)
// {
// this.setState({});
// console.log(this.state.data);
// }
}
render() {
// const { loggingIn } = this.props;
// const { userid, password, submitted } = this.state;
return (
<div className="container">
<div className="col-md-5 col-md-offset-13 login-form text-center">
<div className="form-top">
<div className="form-top-left">
<h3>LOGIN PAGE</h3>
<p>Please enter your userID and password</p>
</div>
</div>
<form onSubmit={this.handleSubmit}>
<div className="input-group col-lg-10 col-md-offset-1">
<span className="input-group-addon">
<i className="glyphicon glyphicon-user" />
</span>
<input
className="form-control"
placeholder="UserID"
name="userid"
id="userid"
type="text"
required
/>
</div>
<div className="input-group col-lg-10 col-md-offset-1">
<span className="input-group-addon">
<i className="glyphicon glyphicon-lock" />
</span>
<input
type="password"
name="password"
id="password"
className="form-control"
placeholder="Password"
required
/>
</div>
<button type="submit"
className="btn btn-danger btn-block col-xs-6 col-lg-11"
id="login">
>
LOGIN
</button>
</form>
<div className="form-footer">
<div className="row">
<div className="col-xs-7 blink">
<i className="fa fa-unlock-alt" />
</div>
</div>
</div>
</div>
</div>
);
}
}
export default Login;
Hope you all can help me... Thanks in advance