Javascript 点击浏览器返回按钮后，div仍然保持不可见状态

我在App.jsx中使用了react-router，其中父组件是Main组件，具有以下路径

<Route path="/" element={<Main />}>
  <Route path="login" element={<Login />} />
  <Route path="signup" element={<SignUp />} />
</Route>

在Main.jsx中，我在两个"Button"组件上使用了NavLink，分别用于Login和Signup的上述路由.按钮具有handleClick函数，该函数将一个名为"invisible"的类应用于下面提到的两个div，该函数使用条件呈现将Display属性设置为None，以隐藏div并仅呈现<Outlet />(Login或SignUp组件). 但是，当您try 使用浏览器的后退按钮返回到"/"路由时，div仍然不可见，需要重新加载页面才能显示.

App.jsx

import React, { useState } from "react";
import Main from "./Main";
import SignUp from "./SignUp";
import Login from "./Login";
import Home from "./Home";
import {  createBrowserRouter, createRoutesFromElements, Route, RouterProvider,} from "react-router-dom";

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<Main />}>
      <Route path="login" element={<Login />} />
      <Route path="signup" element={<SignUp />} />
    </Route>
  )
);

function App() {
  return <RouterProvider router={router} />;
}

export default App;

Main.jsx

import React, { useState } from "react";
import Button from "./Button";
import { NavLink, Outlet } from "react-router-dom";

function Main() {
  const [isVisible, setIsVisible] = useState(true);

  const handleClick = () => {
    setIsVisible(false);
  };

  return (
    <div className="main-div">
      <div className={`main-heading-div ${isVisible ? "" : "invisible"}`}>
        <p className="main-heading">
          Welcome to <span>The Book Keeper</span>
        </p>
        <p>Your Personal Library, Perfectly Organized</p>
      </div>

      <div className={`button-div ${isVisible ? "" : "invisible"}`}>
        <NavLink to="/login">
          <Button text="Log in" name="main-login" onClick={handleClick} />
        </NavLink>
        <NavLink to="/signup">
          <Button text="Sign Up" name="main-signup" onClick={handleClick} />
        </NavLink>
      </div>

      <Outlet />
    </div>
  );
}

export default Main;

当我试图解决前面的一个问题时，这个问题出现了，结果是当NavLink中的任何一个被点击时，<Outlet />与Main组件的内容重叠.所以我试着用useState+css来解决这个问题，然后就得出了这个问题.