如何在React中更改引导导航栏切换程序

import React, { useState } from 'react';

const NavBar = () => {
  const [selectedProgram, setSelectedProgram] = useState('Program1');

  const handleProgramChange = (program) => {
    setSelectedProgram(program);
  };

  return (
    <div>
      <button onClick={() => handleProgramChange('Program1')}>
        Program 1
      </button>
      <button onClick={() => handleProgramChange('Program2')}>
        Program 2
      </button>
      <button onClick={() => handleProgramChange('Program3')}>
        Program 3
      </button>

      {selectedProgram === 'Program1' && <div>Content for Program 1</div>}
      {selectedProgram === 'Program2' && <div>Content for Program 2</div>}
      {selectedProgram === 'Program3' && <div>Content for Program 3</div>}
    </div>
  );
};

export default NavBar;