React Router路由切换组件未重载问题求助

问题出在路由切换后，Redux里控制菜单显示的状态没重置，导致Menu一直处于显示状态。下面直接给出解决步骤：

第一步：确保NavSlice包含关闭菜单的Action #

打开你的NavSlice.js，确认存在专门用于关闭菜单的action，没有的话补充上：

// NavSlice.js
import { createSlice } from '@reduxjs/toolkit';

const navSlice = createSlice({
  name: 'menu',
  initialState: false,
  reducers: {
    toggleMenu: state => !state,
    closeMenu: () => false, // 新增关闭菜单的动作
  },
});

export const { toggleMenu, closeMenu } = navSlice.actions;
export default navSlice.reducer;

第二步：在App.js中监听路由变化，切换时自动关闭菜单 #

修改App.js，引入路由监听工具和Redux的dispatch方法，每次路由发生变化时触发关闭菜单的action：

import { Box } from "@mui/material";
import { useSelector, useDispatch } from "react-redux";
import { Outlet, useLocation } from "react-router-dom";
import TopScroll from "./Components/TopScroll";
import "./Style/app.scss";
import { menu, closeMenu } from "./NavSlice";
import { useEffect } from "react";
import Header from "./Components/Header";
import Menu from "./Components/Menu";

function App() {
  const menuOpened = useSelector(menu);
  const location = useLocation();
  const dispatch = useDispatch();

  // 路由切换时自动关闭菜单
  useEffect(() => {
    dispatch(closeMenu());
  }, [location, dispatch]);

  useEffect(() => {
    menuOpened
      ? document.body.classList.add("stop-scrolling")
      : document.body.classList.remove("stop-scrolling");
  }, [menuOpened]);

  return (
    <Box position={"relative"} overflow="hidden">
      <TopScroll />
      <Header />
      {menuOpened && <Menu />}
      <Outlet />
    </Box>
  );
}

export default App;

为什么之前的尝试没解决问题？ #

• 把Menu组件挪到子路由组件中，但只要Redux里的menu状态仍为true，组件就会继续渲染，根本没解决状态残留的核心问题。
• NavLink和useNavigate仅负责路由跳转，不会自动修改Redux中的菜单状态，必须主动触发状态重置。

修改完成后，无论从project页面切换到home页面还是其他路由，菜单都会自动关闭，Menu组件也会因状态变更被销毁，完全符合你的需求。

内容的提问来源于stack exchange，提问作者Ahmed Ali