刷新时，侧边栏在移动设备上打开

Question

我有一个已成功隐藏和显示的侧边栏菜单。当侧边栏菜单隐藏并且我刷新页面或浏览器时，隐藏的侧边栏菜单将返回到其原始外观 我怎样才能避免这种情况？我希望侧边栏在桌面视图上打开。这是一个仪表板。

这是ContextProvider.js

import { useState, createContext, useContext, useEffect } from "react";

const StateContext = createContext()
const initialState = {
    cart: false,
    notification: false,
    searchBar: false,
}

export const ContextProvider = ({ children }) => {
    const [activeMenu, setActiveMenu] = useState(true)
    const [isClicked, setIsClicked] = useState(initialState)
    const [screenSize, setScreenSize] = useState(undefined)
    const [currentColor, setCurrentColor] = useState('#bf9a8e')
    const [currentMode, setCurrentMode] = useState('Light')
    const [isOpen, setIsOpen] = useState(false)
    const [currentIndex, setCurrentIndex] = useState(0)

    

    const setMode = (e) => {
        setCurrentMode(e.target.value);
        localStorage.setItem('themeMode', e.target.value);
      };

      const setColor = (color) => {
        setCurrentColor(color);
        localStorage.setItem('colorMode', color);
      };

    const handleClick = (clicked) => {
        setIsClicked({...initialState, [clicked]: true})
    }

    const slideLeft = () => {
        let slider = document.getElementById('slider-2')
        slider.scrollLeft = slider.scrollLeft - 500
      }

    const slideRight = () => {
        let slider = document.getElementById('slider-2')
        slider.scrollLeft = slider.scrollLeft + 500
      }


    return (
        <StateContext.Provider value={{ 
            activeMenu,
            setActiveMenu,
            isClicked,
            setIsClicked,
            handleClick,
            screenSize,
            setScreenSize, currentColor,
            currentMode,
            setColor,
            setMode,
            isOpen, 
            setIsOpen, 
            slideLeft,
            slideRight,
            currentIndex, 
            setCurrentIndex, 
         }}>
            {children}
        </StateContext.Provider>
    )
}

export const useStateContext = () => useContext(StateContext)

我认为我应该放置一个 useEffect 挂钩来更改初始状态，但我不确定它是否可以解决这个问题。这是我的侧边栏组件

function Sidebar() {

  const { activeMenu, setActiveMenu, screenSize, currentColor } = useStateContext();

  const handleCloseSideBar = () => {
    if (activeMenu !== undefined && screenSize <= 900) {
      setActiveMenu(false);
    }
  };

  const activeLink = 'flex items-center gap-5 pl-4 pt-3 pb-2.5 text-gray-100 dark:text-white rounded-lg bg-slate-700 text-md m-2'
  const normalLink = 'flex items-center gap-5 pl-4 pt-3 pb-2.5 rounded-lg text-md dark:text-gray-300 text-gray-500 dark:hover:text-gray-600 m-2 hover:bg-gray-200';

  return (
    <div className="mr-4 ml-4 mt-3 scrollbar-hide h-screen md:overflow-hidden overflow-auto md:hover:overflow-auto pb-10">
      {/* LOGO SECTION */}
      {activeMenu && (
        <>
          <div className="flex text-slate-700 dark:text-white justify-between">
            <Link
              to="/"
              onClick={handleCloseSideBar}
              className="flex text-xl font-extrabold items-center gap-3 ml-4 mt-4 tracking-tight"
            >
              <GiPlanetCore/>
              <span>BaIlEyWoRld</span>
            </Link>
            <button
              type="button"
              onClick={() => setActiveMenu((prevActiveMenu) => !prevActiveMenu)}
              className="text-2xl p-3 mt-4 block sm:hidden"
            >
              <MdClose />
            </button>
          </div>
          <div className="mt-10">
            {links.map((item) => (
              <div key={item.title}>
                <p className="text-gray-400 dark:text-gray-200 font-semibold uppercase m-4 mt-4">
                  {item.title}
                </p>
                {item.links.map((link) => (
                  <NavLink
                    to={`/${link.name}`}
                    key={link.name}
                    onClick={handleCloseSideBar}
                    className={({isActive}) =>
                      isActive ? activeLink : normalLink
                    }
                    style={({isActive}) => ({backgroundColor: isActive ? currentColor : ''})}
                  >
                    {link.icon}
                    <span>{link.name}</span>
                  </NavLink>
                ))}
              </div>
            ))}
          </div>
        </>
      )}
    </div>
  );
}

export default Sidebar

Answer 1

这是因为刷新页面时无法保持状态。解决方案可能是使用查询参数并在 activeMenu 更改时添加例如

?open=true

。所以在这种情况下，您可以在刷新页面时获取之前的状态并默认设置它

true

。