Logré que mi enrutador de reacción navegue a otra página en mi sitio web; sin embargo, después de que haya terminado, la redirección del enlace o botón en este caso aún persiste en la otra página (login.js).

¿Alguien puede explicarme por qué sucede esto y cómo hago para que no se muestre en mi página?

Aplicación.js

 import Login from "./login"; import React from "react"; import "./App.css"; import { Routes, Route, Router } from "react-router-dom"; import { useNavigate } from "react-router-dom"; function App() { const navigate = useNavigate(); const handleClick = () => { navigate("/login"); } return ( <div className="Main"> <Routes> <Route path="/login" element={<Login />} /> </Routes> <button onClick={handleClick} type="button" /> </div> ); } export default App;

Iniciar sesión.js

 [![import React from "react"; export default function Login() { return ( <div className="Login"> <h1>Login</h1> </div> )}