CODEWITHSUNDEEP
reactjsroutesreact-router
Norayr Ghukasyan
Norayr Ghukasyan

Reputation: 1418

How to render a component only for one Route?

I am trying to remove Header component from route page only . How can i do this in React router 4 ?

this is my Routes

const AppRouter: any = () => (
      <BrowserRouter>
        <React.Fragment>
          <Header />
          <Switch>
            <Route path={LOOP_MAIN_ROUTE} component={LandingPage} exact/>
            <Route path={LOOP_LOGIN_ROUTE} component={LoginPage} exact/>
            <ProtectedRoute path={LOOP_SEARCH_ROUTE} component={SearchPage} />
            <ProtectedRoute path={LOOP_OFFER_ROUTE} component={Offer} exact />
            <ProtectedRoute path={LOOP_OFFER_APPROVAL} component={OfferApproval} exact />
            <ProtectedRoute path={LOOP_OFFER_CONFIRMATION} component={OfferConfirmation} exact />
          </Switch>
        </React.Fragment>
      </BrowserRouter>
    );

export default AppRouter;

Upvotes: 0

Views: 351

Answers (2)

Estus Flask
Estus Flask

Reputation: 223104

Header can be conditionally rendered as a route:

<Route render={
  ({ location: { pathname } }) => pathname !== LOOP_MAIN_ROUTE && <Header/>
}/>

Upvotes: 2

Ryan Cogswell
Ryan Cogswell

Reputation: 81126

One way to do this is using matchPath. For instance in your Header component:

import React from "react";
import {LOOP_MAIN_ROUTE} from "whereverYouHaveThisConstant";
import { withRouter, matchPath } from 'react-router-dom';
const Header = (props) => {
   const suppressHeader = matchPath(props.location.pathname, {path: LOOP_MAIN_ROUTE});
   if (suppressHeader ) {
      return null;
   }
   return <>your header stuff</>;
};
export default withRouter(Header);

Upvotes: 1

Related Questions