React Router Link Persists after Page Navigation-CodePudding

I have managed to get my react-router to navigate to another page on my website however after it's done redirecting the link or button in this case still persists on the other page (login.js).

Can someone explain to me why this happens, and how I get it to not render on my page?

App.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;

[![import React from "react";

export default function Login() {

    return (
        <div className="Login">
            <h1>Login</h1>
            </div>
     )}

CodePudding user response：

If you clearly look your routes are working inside a div which means anything along with routes will be shown on the page permanently even if your route changes.