How to remove a site header from specific pages React-CodePudding

I have set up a login page for my web app but the site header component I created earlier appears on the top. It has a menu in it that leads to other pages, so if it's on the login page a user doesn't need to login when they can just click the menu option that will lead them to the home page. I would like the site header to be invisible on the login, register and reset pages.

index.js

  return (
    <BrowserRouter>
    <SiteHeader />
    <Routes>
      <Route path="/reviews/:id" element={ <MovieReviewPage /> } />
      <Route path="/movies/home" element={<HomePage />} />
      <Route path="/movies/favorites" element={<FavoriteMoviesPage />} />
      <Route path="/movies/upcoming" element={<UpcomingMoviesPage />} />
      <Route path="/movies/:id" element={<MoviePage />} />
      <Route exact path="/" element={<LoginPage />} />
      <Route exact path="/register" element={<RegisterPage />} />
      <Route exact path="/reset" element={<ResetPage />} />
      <Route path="*" element={ <Navigate to="/" /> } />
    </Routes>
  </BrowserRouter>
  );
};

CodePudding user response：

There are many ways to do that, but personally, I prefer to do so.

export const MyLayout = ({children}) => {

  return (
   <>
     <SiteHeader />
     {children}
    </>
)
}

And after all, put your PageComponent inside component wherever you need.

For example.

const HomePage = () => {
  return (
    <MyLayout>
       <div> This is Home Page </div>
    </MyLayout>

   )

}

CodePudding user response：

Add an Authentication Context Provider. You could then read the context and render the header when you're logged in, else not.

https://codesandbox.io/embed/authentication-with-react-context-d3x0r