What mean "form submitting canceled"? - reactjs

Question

Get warning in console when trying to submit login form (form submission canceled because the form is not connected). If deleting if (isAuthed) return <Redirect to="/additem" />; my form became are connected. In other issues people say 'replace type of button from submit to button'. It doesn't work. How can I connect form?
export function Login() {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const [isAuthed, setIsAuthed] = useState(false);
console.log(isAuthed);
function onChangeUsername(e) {
setUsername(e.target.value)
}
function onChangePassword(e) {
setPassword(e.target.value)
}
function getToken() {
const token = Date.now().toString();
if (username && password) {
localStorage.setItem('userToken', JSON.stringify(token));
setIsAuthed(true)
}
}
//if (isAuthed) return <Redirect to="/additem" />;
return (
<div className="col-md-12">
<div className="card card-container">
<form onSubmit={getToken} noValidate>
<span className="fas fa-sign-in-alt"/>
<div className="form-group">
<label htmlFor="username">Username</label>
<input type="text" className="form-control"
name="username"
value={username}
onChange={onChangeUsername}
placeholder="Login"
required
/>
<div className="invalid-feedback">
Wrong username
</div>
</div>
<div className="form-group">
<label htmlFor="password">Password</label>
<input
type="password"
className="form-control"
name="password"
value={password}
onChange={onChangePassword}
placeholder="Password"
required
/>
<div className="invalid-feedback">
Wrong password
</div>
</div>
<div className="form-group">
<button className="btn btn-primary" type="submit">
Submit form
</button>
</div>
</form>
</div>
</div>
)
}

Answer 1

First of your form is submitting except you're doing one thing which is not getting you your expected results. You will need to prevent the default behavior with form submission. Preventing the default behavior will prevent the page from reloading which is the normal behavior with form submission.
function getToken(event) {
event.preventDefault();
const token = Date.now().toString();
if (username && password) {
localStorage.setItem('userToken', JSON.stringify(token));
setIsAuthed(true)
//you can then redirect here. Example
//pass in a props then props.history.push("/additem");
}
}