I am looking for a solution that will remove a <header/> and <footer/> ponent from my signup.js and signin.js pages.

Currently, my root index.js file is shown as

class Template extends React.Component {
render() {
    const { children } = this.props
    return (
        <main>
          <Header/>
          {children()}
          <Footer/>
        </main>
    )
}}
Template.propTypes = {
    children: PropTypes.func
}
export default Template

Which is the main layout for all my page, posts, products, etc. Yet without creating another layout, I would like to conditionally remove the <header/> and <footer/> ponents from being a part of pages signup.js and signin.js

As suggested by GatsbyJS I have tried - of which is removing the ponents from all pages.

if (this.props.location.pathname !== "/signup/") {
   return (
      <main>
         {children()}
      </main>
    )
} else {
    return this (
      <main>
         <Header/>
         {children()}
         <Footer/>
      </main>
    )
}

I am looking for a solution that will remove a <header/> and <footer/> ponent from my signup.js and signin.js pages.

Currently, my root index.js file is shown as

class Template extends React.Component {
render() {
    const { children } = this.props
    return (
        <main>
          <Header/>
          {children()}
          <Footer/>
        </main>
    )
}}
Template.propTypes = {
    children: PropTypes.func
}
export default Template

Which is the main layout for all my page, posts, products, etc. Yet without creating another layout, I would like to conditionally remove the <header/> and <footer/> ponents from being a part of pages signup.js and signin.js

As suggested by GatsbyJS I have tried - of which is removing the ponents from all pages.

if (this.props.location.pathname !== "/signup/") {
   return (
      <main>
         {children()}
      </main>
    )
} else {
    return this (
      <main>
         <Header/>
         {children()}
         <Footer/>
      </main>
    )
}

• javascript
• reactjs
• gatsby

Share Improve this question Follow asked Apr 3, 2018 at 1:54 DarrenDarren 2,2901010 gold badges4848 silver badges104104 bronze badges 7

• 1 why not create a new template for signin/signup? – muZk Commented Apr 3, 2018 at 1:56
• Haha... haven't got that far in my React/Gatsby learning journey. Does sound like a better idea though. – Darren Commented Apr 3, 2018 at 1:58
• Is there performance reasons why I would want to do that opposed to adding conditions? – Darren Commented Apr 3, 2018 at 1:59
• I think that performance is not an issue with adding conditions. But the main difference is about maintainability. – muZk Commented Apr 3, 2018 at 2:02
• i was thinking the same thing about making different layouts – Omar Commented Apr 3, 2018 at 2:02

 |  Show 2 more ments

2 Answers 2

Sorted by: Reset to default 4

I would use a different template for your signin and signup ponents, but if you don't do that:

You have a typo in your code, in your else you are returning this(...) it should return (...). This way:

if (this.props.location.pathname !== "/signup/") {
   return (
      <main>
         {children()}
      </main>
    )
} else {
    return (
      <main>
         <Header/>
         {children()}
         <Footer/>
      </main>
    )
}

Also, perhaps your if condition is inverted... because in /signup/ you don't want Header and Footer:

if (this.props.location.pathname === "/signup/" || this.props.location.pathname === "/signin/") {
   return (
      <main>
         {children()}
      </main>
    )
} else {
    return (
      <main>
         <Header/>
         {children()}
         <Footer/>
      </main>
    )
}

Alternatively, if you don't want to duplicate code...

const isSignIn = ["/signup/", "/signin/"].indexOf( this.props.location.pathname) !== 0;

return (
  <main>
     { !isSignIn && (<Header/>) }
     {children()}
     { !isSignIn && (<Footer/>) }
  </main>
)