Redirecting Conditionally using React Router - react-router

Question

I want to go to the page with the link after checking the terms.But nothing happens.
App.tsx
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Login from "./Components/Login";
import "./styles/index.scss";
import { Suspense } from "react";
import ToDoScreen from "./Pages/ToDoScreen";
function App() {
return (
<Router>
<div className="App">
<Suspense fallback={<h2>Loading...</h2>}>
<Switch>
<Route exact path="/" component={Login} />
<Route path="/home" component={ToDoScreen} />
</Switch>
</Suspense>
</div>
</Router>
);
}
export default App;
Login.tsx
When the button I want is clicked, it first checks and then redirects to the page.
<button onClick={onClick}>Login</button>
OnClick :
const onClick = () => {
if (inputs.name.length < 3 || inputs.lastname.length < 3) {
alert("name/lastname must be at least 3 characters");
} else {
<Link to="/home"></Link>;
}
};

Answer 1

Link components are supposed to be rendered and not returned or used within event handlers. To dynamically update the route, you should use history.push instead
import { useHistory } from 'react-router-dom';
function MyComp() {
const history = useHistory();
const onClick = () => {
if (inputs.name.length < 3 || inputs.lastname.length < 3) {
alert("name/lastname must be at least 3 characters");
} else {
history.push("/home");
}
};
}

Answer 2

<Link> just generates an anchor tag wrapped with some "react-router" functionality.
It won't actually make the user go to a particular route unless, the user clicks on the generated <a>.
Instead, you want to use <Redirect>. With this, you can redirect the user to a new Route.
Thereby, making your else condition to be
else {
<Redirect to="/home" />
}
Refer to the official documentation for more information.