Estoy tratando de crear una página de inicio de sesión que navegue a otra página cuando se haga clic en el botón Submit usando ReactJS. pero encontré algunos problemas:

1. parece que la función del controlador de eventos se llama de inmediato cuando se carga la página porque console.log('clicked') aparece en las herramientas de desarrollo antes de que haga nada

2. cuando realmente hice clic en el botón Submit , la página no cambia.

3. cuando la página cambia (o se carga), hay una advertencia en las herramientas para desarrolladores que dice

 No routes matched location "/" in Routes (created by App) in App

aunque ya hay rutas para / y /dashboard en <Routes> en App.js

aquí está mi código (y aquí está CodeSandbox ):

 // ./App.js import { HashRouter as Router, Route, Routes } from "react-router-dom"; import Login from "./components/Login"; import Dashboard from "./components/Dashboard"; export default function App() { return ( <Router> <div className="App"> <h1>Hello CodeSandbox</h1> <Routes> <Route path="/" element={<Login />} /> </Routes> <Routes> <Route path="/dashboard" element={<Dashboard />} /> </Routes> </div> </Router> ); } // ./components/Login.js import { Button } from "react-bootstrap"; import { useNavigate } from "react-router-dom"; const Login = () => { const navigate = useNavigate(); const handleClick = (e) => { console.log("clicked"); navigate("/dashboard"); }; return ( <div> <form> <h2>The Login page</h2> <Button variant="primary" onClick={handleClick()}> Submit </Button> </form> </div> ); }; export default Login; // ./components/Dashboard.js import React from "react"; const Dashboard = () => { return ( <div> <h2>This is the Dashboard page</h2> </div> ); }; export default Dashboard;