CODEWITHSUNDEEP
reactjsreact-router
Raisul Islam
Raisul Islam

Reputation: 1571

How to hide header and footer when invalid page render

Here is my router:

        <Router className='App'>
          <Header userInfo={authInfo.userInfo}/>
          <Switch>
            <Route exact path="/ads">
              {facebook.connected ? <Redirect to="/ads/dashboard" />:<Redirect to="/ads/onboarding" />}
            </Route>
            <Route exact path='/ads/dashboard' component={DashBoard} />
            <Route exact path='/ads/onboarding' component={LandingPage} />
            <Route exact path='/ads/onboarding-process' component={OnBoardingProcess} />          
            <Route exact path='/ads/facebook/connect' component={AdAccountConnect} />
            <Route exact path='/ads/facebook/lead-sync' component={PagesConnect} />
            <Route exact path='/ads/facebook/pixel' component={FacebookPixel} />
            <Route exact path='/ads/facebook/adset' component={FacebookAdSet} />
            <Route exact path='/ads/facebook/ads-list' component={FacebookAds} />
            <Route component={InvalidPage} />
          </Switch>
          <Footer/>
        </Router>

Now someone please help me to hide the header and footer when 404 or invalid page will be rendered.

Upvotes: 1

Views: 707

Answers (1)

Anastasiia Solop
Anastasiia Solop

Reputation: 1493

You can either rework Header and Footer to look at the current path and hide them when needed, or you can create a Layout component that will hold them both, and then in your router component, you wrap only those that need footer and header.

      <Router className='App'>
        <Switch>
          <Layout>
          <Switch>
            <Route exact path="/ads">
              {facebook.connected ? <Redirect to="/ads/dashboard" />:<Redirect to="/ads/onboarding" />}
            </Route>
            <Route exact path='/ads/dashboard' component={DashBoard} />
            <Route exact path='/ads/onboarding' component={LandingPage} />
            <Route exact path='/ads/onboarding-process' component={OnBoardingProcess} />          
            <Route exact path='/ads/facebook/connect' component={AdAccountConnect} />
            <Route exact path='/ads/facebook/lead-sync' component={PagesConnect} />
            <Route exact path='/ads/facebook/pixel' component={FacebookPixel} />
            <Route exact path='/ads/facebook/adset' component={FacebookAdSet} />
            <Route exact path='/ads/facebook/ads-list' component={FacebookAds} />
          </Switch>
          </Layout>
          <Route component={InvalidPage} />
          </Switch>
        </Router>

useEffect(() => {
    const existingtRoute = routes.find(route => route.pathname === location.pathname); // all routes that need layout
    setShowHeader(!!existingtRoute);
  }, [location]);

return showHeader ? (/*your code*/) : null;

You can also combine the two solutions in any way you feel comfortable.

Upvotes: 1

Related Questions