解决 Ant Design Menu 组件重复渲染导致 React 状态更新错误

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { Menu } from 'antd';

const ComponentOne = () => {
  return (
    <>
      <div>Component One</div>
    </>
  );
};

const ComponentTwo = () => {
  return (
    <>
      <div>Component Two</div>
    </>
  );
};

const CustomMenu = () => {
    return (
        <Menu
            mode="inline"
            defaultSelectedKeys={['1']}
            defaultOpenKeys={['sub1']}
            style={{ width: 256 }}
        >
            {/* Menu Items */}
        </Menu>
    )
}

function App() {
  return (
    <BrowserRouter>
      <CustomMenu /> {/* 放置在 Routes 之前，确保只渲染一次 */}
      <Routes>
        <Route path="/component-one" element={<ComponentOne />} />
        <Route path="/component-two" element={<ComponentTwo />} />
        <Route path="/" element={<div>Home</div>} /> {/* 建议添加默认路由 */}
      </Routes>
    </BrowserRouter>
  );
}

export default App;