react-router does not navigate to desired the route after an async operation-CodePudding

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>
  );
}

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;

CodePudding user response：

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>
  );
};