頁面導航后反應路由器鏈接仍然存在

Question

我已經設法讓我的 react-router 導航到我網站上的另一個頁面，但是在這種情況下重定向鏈接或按鈕后仍然存在於另一個頁面（login.js）上。

有人可以向我解釋為什么會發生這種情況，以及我如何讓它不在我的頁面上呈現？

應用程序.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;

登錄.js

[![import React from "react";

export default function Login() {

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

Answer 1

如果您清楚地看到您的路線在 div 內工作，這意味着即使您的路線發生變化，任何與路線一起的內容都將永久顯示在頁面上。