React Router Link Persists after Page Navigation

Question

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;

Login.js

[![import React from "react";

export default function Login() {

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

Answer 1

如果您清楚地看到您的路线在 div 内工作，这意味着即使您的路线发生变化，任何与路线一起的内容都将永久显示在页面上。