如何让页脚不出现在首页

Question

我是网络开发的新手，我正在创建个人网站。我有三个主要选项卡，HOME、ABOUT ME 和 CONTACT ME。

我创建了一个页脚作为组件，但它在所有这三个页面中呈现，我想保留没有页脚的主页。

下面是我的一些代码。

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>
      
    );
  }
}

正如你们所见，我正在尝试在渲染函数中为我的页脚进行一些条件渲染，但它似乎不起作用，因为它无法识别 'location.pathname'

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

这是我的 HomePage.js 组件 HERO，它只是对内容进行样式设置

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;

这里是我的 Footer.js 组件

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;

任何关于为什么 this.props.location.pathname 不起作用的建议或对其他方法的任何帮助都非常感谢

谢谢:)

Answer 1

改用window.location.href。

Answer 2

在您的应用程序中 class 替换：

<Footer className="g-Footer" />

和

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

我还没有测试过这是否有效

如何让页脚不出现在首页

How to make Footer not to appear on home page

javascript

rendering

reactjs

react-bootstrap

react-router-dom