如何为不同reactjs页面显示不同的导航栏组件

// 导航栏组件
const HomeNavbar = () => {
  return <div>Home Navbar</div>;
};

const AboutNavbar = () => {
  return <div>About Navbar</div>;
};

// 路由配置
const routes = [
  {
    path: "/",
    component: Home,
    navbar: HomeNavbar, // 指定Home页面对应的导航栏组件
  },
  {
    path: "/about",
    component: About,
    navbar: AboutNavbar, // 指定About页面对应的导航栏组件
  },
  // 其他页面配置...
];

// 页面组件
const Home = () => {
  return <div>Home Page</div>;
};

const About = () => {
  return <div>About Page</div>;
};

// 渲染导航栏和页面
const App = () => {
  const { pathname } = useLocation();
  const route = routes.find((r) => r.path === pathname);
  const NavbarComponent = route?.navbar || null;

  return (
    <div>
      {NavbarComponent && <NavbarComponent />}
      <Switch>
        {routes.map((route) => (
          <Route key={route.path} path={route.path} exact>
            {route.component}
          </Route>
        ))}
      </Switch>
    </div>
  );
};

// 在根组件中使用路由
ReactDOM.render(
  <Router>
    <App />
  </Router>,
  document.getElementById("root")
);