不带ReactRouter的ReactJS中的简单路由器

import React, { useState } from 'react';

const App = () => {
  const [currentRoute, setCurrentRoute] = useState('home');

  const handleNavigation = (route) => {
    setCurrentRoute(route);
  };

  const renderContent = () => {
    switch (currentRoute) {
      case 'home':
        return <Home />;
      case 'about':
        return <About />;
      case 'contact':
        return <Contact />;
      default:
        return <NotFound />;
    }
  };

  return (
    <div>
      <nav>
        <button onClick={() => handleNavigation('home')}>Home</button>
        <button onClick={() => handleNavigation('about')}>About</button>
        <button onClick={() => handleNavigation('contact')}>Contact</button>
      </nav>
      {renderContent()}
    </div>
  );
};

const Home = () => <h1>Welcome to the Home page!</h1>;
const About = () => <h1>About Us</h1>;
const Contact = () => <h1>Contact Us</h1>;
const NotFound = () => <h1>Page Not Found</h1>;

export default App;