How to not show specific item in all pages in react.js?

Question

import React from "react";
import "./App.css";
import "bootstrap/dist/css/bootstrap.css";
import Department from "./components/Dept";
import Banner from "./components/Banner";
import Footer from "./components/footer";
import LinksPosition from "./components/NavBar";
import { Redirect } from "react-router-dom";

function App() {
  const shouldRedirect = false; // Set your redirect condition here

  if (shouldRedirect) {
    return <Redirect to="/LinksPosition" />;
  }

  // Define the content for Banner and Department components
  const bannerContent = "This is the banner content for all pages";
  const departmentContent = "This is the department content for all pages";

  return (
    <>
      <LinksPosition />

      {/* Render the Banner component with content */}
      <Banner content={bannerContent} />

      {/* Render the Department component with content */}
      <Department content={departmentContent} />

      <Footer />
    </>
  );
}

export default App;

Am try to not show the Banner and Department section in all pages after route the link banner and department are show in pages , i not need to show i need only in homepage