我想禁用/不想在我的 React 应用程序的特定页面上显示“标题”

Question

我正在尝试在我的 react 应用程序的特定页面上隐藏/禁用“标题”，下面给出的是我的组件的代码：

我想在“/dct”路径上隐藏标题

export default function (WrappedComponent,theme) {
  class Authentication extends PureComponent {
    constructor(props) {
      super(props);
      this.state = { };
    }


    componentDidUpdate() {
      this.checkAuth();
    }

    checkAuth() {
      const { isLoggedIn, history: { push} } = this.props;
      if (!isLoggedIn) {
        push('/')
      }
    }

    render() {
      return (
        <Fragment>
     <article data-theme={theme}>
          {this.checkAuth()}
          <Header />
          <main>
            {this.props.isLoggedIn && <WrappedComponent />}
          </main>
          <Footer />
     </article>
        </Fragment>
      );
    }
  }

 const mapStateToProps = (state) => {
   return {
     isLoggedIn: state.login.loggedIn
   }
 } 
  return connect(mapStateToProps)(Authentication);
}

提前致谢

Answer 1

你需要像这样检查你的路径名：window.location.pathname !== "/dct"

例如，

export default function (WrappedComponent,theme) {
  class Authentication extends PureComponent {
    constructor(props) {
      super(props);
      this.state = { };
    }


    componentDidUpdate() {
      this.checkAuth();
    }

    checkAuth() {
      const { isLoggedIn, history: { push} } = this.props;
      if (!isLoggedIn) {
        push('/')
      }
    }

    render() {
      return (
        <Fragment>
     <article data-theme={theme}>
          {this.checkAuth()}
          {window.location.pathname !== "/dct && ( <Header /> )}
          <main>
            {this.props.isLoggedIn && <WrappedComponent />}
          </main>
          <Footer />
     </article>
        </Fragment>
      );
    }
  }

 const mapStateToProps = (state) => {
   return {
     isLoggedIn: state.login.loggedIn
   }
 } 
  return connect(mapStateToProps)(Authentication);
}

让我知道这是否有效。