How to control a Link on react-router - reactjs

Question

I am trying to build a login, I verify the input and the data, the problem is that I don't know how to disable the Link when the Input is wrong. I mean I don't want the login to continue when the username and the password is wrong.
Can I disable the Link? or I need another solution
I really can't think of another solution, hope you can help me.
import { Link } from 'react-router-dom';
class Index extends Component {
state = {
info: {
email: '',
password: ''
},
login: {
email: 'Email.#gmail.com',
password: '1234'
}
};
updateInfo = e => {
this.setState({
info: { ...this.state.login, [e.target.name]: e.target.value }
});
};
submit = e => {
e.preventDefault();
if (
this.state.info.email === this.state.login.email &&
this.state.info.password === this.state.login.password
) {
console.log('true');
} else {
console.log('false');
}
};
render() {
return (
<div className="text-center container mt-4" style={{ width: '50%' }}>
<form className="px-4 py-3" onSubmit={this.submit}>
<div className="form-group">
<label>Email: </label>
<input
type="text"
placeholder="Email#example.com"
className="form-control"
name="email"
value={this.state.info.email}
onChange={this.updateInfo}
/>
</div>
<div className="form-group">
<label>Password: </label>
<input
type="text"
placeholder="Password"
className="form-control"
name="password"
value={this.state.info.password}
onChange={this.updateInfo}
/>
</div>
<Link to="Profile">
<button type="submit" className="btn btn-secondary mt-3">
Sign in
</button>
</Link>
<div>
<Link to="/register" className="badge badge-light p-2 m-2">
Register
</Link>
</div>
</form>
</div>
);
}
}
export default Index;

Answer 1

add new field in state isValueCorrect:
class Index extends Component {
state = {
isValueCorrect: false,
info: {
email: '',
password: ''
},
login: {
email: 'Email.#gmail.com',
password: '1234'
}
};
then check the values of password and login in updateInfo and if login and password are correct call this.setState({isValueCorrect: true}) method and then use simple if statement in your component in curly brackets like this:
{ this.state.isValueCorrect === true ?
( <Link to="Profile">
<button type="submit" className="btn btn-secondary mt-3">
Sign in
</button>
</Link>)
:
(null)
}

Answer 2

<button type="submit" className="btn btn-secondary mt-3">
Sign in
</button>
all you need to remove the Link and keep the button
then after the sign in succeeded then you can use:-
this.props.history.push('/Profile');
or
import { Redirect } from 'react-router-dom'
<Redirect to='/target' />