How to make Footer not to appear on home page

Question

I am very new in web development and I am creating a personal website. I have three main tabs, HOME, ABOUT ME and CONTACT ME.

I've created a Footer as a component but it is rendering in all these three pages and I would like to keep my HOME page without a Footer.

Below some of my Code.

App.js

import React from 'react';
import {BrowserRouter as Router, Route, Link } from 'react-router-dom';

import Container from 'react-bootstrap/Container';
import Navbar from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/Nav';
import './App.css';


import ...


class App extends React.Component {

  constructor(props) {
      super(props);
      this.state = {
          title: 'Lenin Cruz',
         
          headerLinks: [
              { title: 'Home', path: '/home' },
              { title: 'About', path: '/about' },
              { title: 'Contact', path: '/contact' }
          ],

          home: {
              title: 'HELLO I\'M Zoro!',
              subTitle: 'I\'m a Engineering Student\n',
              text: 'Checkout my projects below',
              logo: logoo
          },
          about: {
              title: 'About Me',
           },
          contact: {
              title: 'Get in touch'
          },
        
      }
  }

  render() {
    return(
      
      <Router>
        <Container>
          
          <Navbar >
            <Navbar.Brand> 
                            <img 
                              src= {this.state.home.logo} 
                            />
            </Navbar.Brand>
            
            <Navbar.Toggle aria-controls="navbar-toggle"/>
            <Navbar.Collapse id="navbar-toggle">
              <Nav>
                <Link className="nav-link" to ="/home"><Badge variant="secondary">Home</Badge></Link>
                <Link className="nav-link" to ="/about"><Badge variant="secondary">About</Badge></Link>
                <Link className="nav-link" to ="/contact"><Badge variant="secondary">Contact</Badge></Link>
              </Nav>
            </Navbar.Collapse>
          </Navbar>
            
                      
          <Route path="/home" exact render ={() => <HomePage  title= {this.state.home.title} 
                                                          subTitle={this.state.home.subTitle} 
                                                          text={this.state.home.text} />} />
          <Route path="/about" exact render ={() => <AboutPage title= {this.state.about.title}
                                                               photo= {this.state.about.photo}  />} />
          <Route path="/contact" exact render ={() => <ContactPage title= {this.state.contact.title}  />} />

          
          {/* {this.props.location.pathname !== '/home' && <Footer/>} */}
          <Footer className="g-Footer"/>

          
        </Container>
        
      </Router>
      
    );
  }
}

As you guys see, I was trying some conditional rendering for my footer in the render function but it seems not to work as it it not recognizing 'location.pathname'

{/* {this.props.location.pathname !== '/home' && <Footer/>} */}

Here is my HomePage.js with a component HERO which is just styling the content

import React from 'react';

import Hero from '../components/Hero';

function HomePage(props) {
    return(
        <div>
            <Hero title={props.title} subTitle= {props.subTitle} text= {props.text}/>
            
        </div>
    );

}



export default HomePage;

and here ir my Footer.js component

import React from 'react';
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';

function Footer() {
    return(
        
        <footer >
            
            <Container >
                <Col >
                    <Row>
                            Let's talk
                    </Row>

                </Col>
            </Container>
            
        </footer>
        
    );

}

export default Footer; 

Any suggestions about why this.props.location.pathname doesn't work or any help with other method is much appreciated

Thanks :)

Answer 1

In your App class replace:

<Footer className="g-Footer" />

with

<Route
    path={new RegExp('^(?!.*(\/home)).*$')}
    exact
    render={() => <Footer className="g-Footer" />}
/>

I have not tested if this works though