I was working on a project when it turned out that when I dispatched an action and tried to navigate to the /home route after making an async call to my api and using the await keyword to wait for my response , it was not functioning.
I reproduce the problem in a simple react app codesandbox link
The issue with the following code is that it does not navigate to the home route when isLogged is true.
app.js
import "./styles.css";
import { useSelector } from "react-redux";
import {
BrowserRouter as Router,
Routes,
Route,
Navigate
} from "react-router-dom";
import Home from "./component/Home";
import Login from "./component/Login";
export default function App() {
const { isLogged } = useSelector((state) => state.auth);
console.log("rendered");
return (
<div className="App">
<Router>
<Routes>
<Route path="/" element={<Login />} />
<Route path="/home" element={isLogged ? <Home /> : <Login />} />
<Route path="*" element={<Navigate to="/" />} />
</Routes>
</Router>
</div>
);
}
Login.jsx
import { useState } from "react";
import Forms from "./Forms";
const Login = () => {
const [openform, setOpenForm] = useState(false);
return (
<div className="login">
{openform && <Forms />}
{!openform && (
<button onClick={() => setOpenForm(!openform)}>
click to open Form
</button>
)}
</div>
);
};
export default Login;
Forms.jsx
import { useDispatch } from "react-redux";
import { useNavigate } from "react-router-dom";
import { setIsLogged } from "../store/authSlice";
const Forms = () => {
const dispatch = useDispatch();
const navigate = useNavigate();
var goToHome = () => {
dispatch(setIsLogged(true));
navigate("/home");
};
const submit = () => {
setTimeout(() => {
console.log("finished");
goToHome();//It works if I call the goToHome method straight without using the timeout.
}, 2000);
};
return (
<form action="">
<input type="text" placeholder="enter your name" />
<button onClick={submit}>click to login</button>
</form>
);
};
export default Forms;
The code is not preventing the default form action from occurring, resulting in the page reloading and the entire React app remounting. Consume the onSubmit event object and call preventDefault on it.
Example:
const Forms = () => {
const dispatch = useDispatch();
const navigate = useNavigate();
const goToHome = () => {
dispatch(setIsLogged(true));
navigate("/home");
};
const submit = (e) => { // <-- consume onSubmit event object
e.preventDefault(); // <-- prevent default form action
setTimeout(() => {
goToHome();
}, 2000);
};
return (
<form action="">
<input type="text" placeholder="enter your name" />
<button onClick={submit}>click to login</button>
</form>
);
};