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

时间:2019-07-11 07:29:57

标签: reactjs redux react-redux

我正在尝试隐藏/禁用我的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);
}

预先感谢

1 个答案:

答案 0 :(得分:0)

您需要像这样检查路径名: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);
}

让我知道这是否可行。