how to use onSubmit in react-router while onSubmit checks the details in the form and if it's correct he pass with Link="" to another component - react-router

Question

I'm trying to use onSubmit in the form, I wand it to check the details in the form and according to the details to decide if I want to pass to another component with Link in react-router how can I do that, how to write the Link (and it will pass only when I want in the onSubmit function)?
this is my routing-code:
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import LogIn from "./components/LogIn";
import HomePage from "./HomePage";
import Todos from "./components/Todos";
import Albums from "./components/Albums";
import Info from "./components/Info";
import Posts from "./components/Posts";
function App() {
return (
<Router>
<div>
<Routes>
<Route path="/" pelement={<HomePage />} />
<Route path="/login" element={<LogIn />} />
<Route path="/todos" element={<Todos />} />
<Route path="/info" element={<Info />} />
<Route path="/albums" element={<Albums />} />
<Route path="/posts" element={<Posts />} />
</Routes>
</div>
</Router>
);
}
export default App;
and I want that when I will click on the submit here(down- in the log in component) it will control on the Link="/" that will happen only if onSubmit decide
import { FormEventHandler } from "react";
function LogIn() {
const [inputField, setInputField] = useState({
user_name: "",
password: "",
});
const inputChange = (e) => {
e.preventDefault();
setInputField((prevState) => ({
...prevState,
[e.target.name]: e.target.value,
}));
};
const submitButton = (e) => {
e.preventDefault();
if(**the details in the form are correct**)
**add the details to local storage and pass to home page with:<Link to="/"></Link>**
else
alert("details are not correct");
};
return (
<form onSubmit={submitButton}>
<label>Enter you user name</label>
<input
type="text"
name="user_name"
onChange={inputChange}
placeholder="Your user name"
value={inputField.user_name}
/>
<br />
<label>Enter you password</label>
<input
type="password"
name="password"
onChange={inputChange}
placeholder="Your password"
value={inputField.password}
/>
<br />
<button type="submit" >Log In</button>
</form>
);
}
export default LogIn;

Answer 1

You can't return a Link component in a callback like this and expect it to be rendered and do anything in the DOM. In callbacks you will need to issue an imperative navigation action using the navigate function.
Example:
import { useNavigate } from 'react-router-dom';
function LogIn() {
const navigate = useNavigate();
...
const submitButton = (e) => {
e.preventDefault();
if (**the details in the form are correct**) {
// add the details to local storage
localStorage.setItem("details", details);
// and pass to home page
navigate("/", { state: { details } });
} else {
alert("details are not correct");
}
};
...