I have a parent component in my React application that conditionally renders different child components based on user authentication state. Here’s a simplified snippet of my parent component:

let content = isLoggedIn ? (
  <Login onSignUp={handleSignUp} onReturn={handleReturnMainPage} />
) : isSignUp ? (
  <SignUp />
) : (
  <HomePage onLogin={handleLogin} onSignUp={handleSignUp}/>
);

return <React.Fragment>{content}</React.Fragment>;

Within this setup, I have a child component structure as follows:

Parent
├── Child1 (Login)                    (Login Component)
│   └── Child3 (Dashboard)            (Dashboard Component)
└── Child2 (Homepage)                 (Containging Component Navbar and Section)
    └── Child4 (Navbar)               (Containing Navbar content of HomePage & Dashboard)

Now, in Child4 (Navbar), I need to conditionally display different content based on whether the user is on the Homepage or Dashboard. I understand this can be achieved through prop drilling, but I’m unsure about the best approach to pass and handle these props effectively.

Could someone please provide a clear example or guidance on how to implement prop drilling in this context? I’d like Child4 (Navbar) to display specific content depending on whether the user is on the Homepage or Dashboard component.