根据react中的用户角色，向用户显示附加页面的最佳方式是什么

import React, { useState } from 'react';

const App = () => {
  const [userRole, setUserRole] = useState('guest'); // 用户角色，默认为访客

  // 根据用户角色进行条件渲染
  const renderAdditionalPage = () => {
    if (userRole === 'admin') {
      return <AdminPage />;
    } else if (userRole === 'user') {
      return <UserPage />;
    } else {
      return <GuestPage />;
    }
  };

  return (
    <div>
      {/* 显示其他页面内容 */}
      <MainPage />

      {/* 根据用户角色显示附加页面 */}
      {renderAdditionalPage()}
    </div>
  );
};

const AdminPage = () => {
  return (
    <div>
      <h1>管理员页面</h1>
      {/* 具体的管理员页面内容 */}
    </div>
  );
};

const UserPage = () => {
  return (
    <div>
      <h1>用户页面</h1>
      {/* 具体的用户页面内容 */}
    </div>
  );
};

const GuestPage = () => {
  return (
    <div>
      <h1>访客页面</h1>
      {/* 具体的访客页面内容 */}
    </div>
  );
};

export default App;