Programmatic routing not working
Unanswered
Peruvian anchoveta posted this in #help-forum
Peruvian anchovetaOP
I am having a hard time discerning why when the user inputs the correct username/password in this page, they are not routed to my dashboard page. When I go to /dashboard "manually", it works fine. I am confused. Anyone have any tips? I also noticed that my console logs are not working - the page simply reloads. Would appreciate any tips at all that move me forward, thanks.
'use client'
import React, { useState } from 'react';
import { useRouter } from 'next/navigation';
const Login = () => {
const router = useRouter();
const [userSubmittedUsername, setUserSubmittedUsername] = useState('');
const [userSubmittedPassword, setUserSubmittedPassword] = useState('');
const handleUsernameChange = (event) => {
setUserSubmittedUsername(event.target.value);
}
const handlePasswordChange = (event) => {
setUserSubmittedPassword(event.target.value);
}
const handleSubmit = (event) => {
event.preventDefault();
if (userSubmittedUsername === 'rob') {
console.log('entrez-vous');
router.push('/dashboard');
} else {
console.log('incorrect username.');
}
console.log('Username:', userSubmittedUsername);
console.log('Password:', userSubmittedPassword);
}
return (
<div>
<h1>Login</h1>
<form onSubmit={handleSubmit}>
<div>
<label>Username:</label>
<input
type="text"
value={userSubmittedUsername}
onChange={handleUsernameChange}
/>
</div>
<div>
<label>Password:</label>
<input
type="password"
value={userSubmittedPassword}
onChange={handlePasswordChange}
/>
</div>
<button type="submit">Log In</button>
</form>
</div>
);
}
export default Login;