使用导航栏动态显示/加载React.js组件onClick？

import React, { lazy, Suspense, useState } from 'react';

// 导入需要动态加载的组件
const Home = lazy(() => import('./Home'));
const About = lazy(() => import('./About'));
const Contact = lazy(() => import('./Contact'));

const Navigation = () => {
  const [selectedComponent, setSelectedComponent] = useState(null);

  const handleMenuClick = (component) => {
    setSelectedComponent(component);
  };

  return (
    <div>
      <ul>
        <li onClick={() => handleMenuClick('home')}>Home</li>
        <li onClick={() => handleMenuClick('about')}>About</li>
        <li onClick={() => handleMenuClick('contact')}>Contact</li>
      </ul>

      <Suspense fallback={<div>Loading...</div>}>
        {selectedComponent === 'home' && <Home />}
        {selectedComponent === 'about' && <About />}
        {selectedComponent === 'contact' && <Contact />}
      </Suspense>
    </div>
  );
};

export default Navigation;