Reactjs 使用物化ECSS响应sidenav无法单击&；突然出现

这里我面临的问题是UX问题，当我使用isAuthenticated时，将显示AuthLink，如果未验证，则将显示GuestLink。当它转到responsive时，用户无法单击hamburger按钮，也无法弹出sidenav

const Navbar = ({ auth: { isAuthenticated, loading }, logout }) => {
  useEffect(() => {
    var elem = document.querySelector(".sidenav");
    var instance = M.Sidenav.init(elem, {
      edge: "left",
      inDuration: 250
    });
  }, []);

包含Navbar jsx的两个变量 这是授权链接

const authLinks = (

    <Fragment>
      <nav>
        <div className="nav-wrapper blue-grey darken-4">
          <div className="container">
            <Link to="/" className="brand-logo">
              WebDev
            </Link>
            <a to="#" data-target="mobile-demo" className="sidenav-trigger">
              <i className="material-icons">menu</i>
            </a>
            <ul className="right hide-on-med-and-down">
              <li>
                <Link onClick={logout} to="/">
                  Logout
                </Link>
              </li>
            </ul>
          </div>
        </div>
      </nav>

      <ul className="sidenav blue-grey darken-4" id="mobile-demo">
        <li>
          <Link onClick={logout} to="/">
            Logout
          </Link>
        </li>
      </ul>
    </Fragment>
  );

const authLinks=(
网络开发者
菜单


注销




注销


);

这里是访客链接，几乎是相同的只是链接到不同的路线

const guestLinks = (
    <Fragment>
      <nav>
        <div className="nav-wrapper blue-grey darken-4">
          <div className="container">
            <Link to="/" className="brand-logo">
              WebDev
            </Link>
            <a to="#" data-target="mobile-demo" className="sidenav-trigger">
              <i className="material-icons">menu</i>
            </a>
            <ul className="right hide-on-med-and-down">
              <li>
                <Link to="!#">Developers</Link>
              </li>
              <li>
                <Link to="/register">Register</Link>
              </li>
              <li>
                <Link to="/login">Login</Link>
              </li>
            </ul>
          </div>
        </div>
      </nav>

      <ul className="sidenav blue-grey darken-4" id="mobile-demo">
        <li>
          <Link to="!#">Developers</Link>
        </li>
        <li>
          <Link to="/register">Register</Link>
        </li>
        <li>
          <Link to="/login">Login</Link>
        </li>
      </ul>
    </Fragment>
  );

const guestLinks=(
网络开发者
菜单


开发者


登记


登录




开发者


登记


登录


);

if-else语句

return (
    <div>
      {!loading && (
        <Fragment>{isAuthenticated ? authLinks : guestLinks}</Fragment>
      )}
    </div>
  );
Navbar.prototype = {
  logout: PropTypes.func.isRequired,
  auth: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
  auth: state.auth
});

export default connect(mapStateToProps, { logout })(Navbar);

返回(
{！正在加载&&(
{isAuthenticated？authLinks:guestLinks}
)}
);
Navbar.prototype={
注销：需要PropTypes.func.isRequired，
auth:PropTypes.object.isRequired
};
常量mapStateToProps=状态=>({
auth:state.auth
});
导出默认连接（mapstatetops，{logout}）（导航栏）；

我找到了解决办法。。 首先，我为GuestLink创建另一个组件

const Navbarguest = () => {
  useEffect(() => {
    var elem = document.querySelector(".sidenav");
    var instance = M.Sidenav.init(elem, {
      edge: "left",
      inDuration: 250
    });
  }, []);
  return (
    <div>
      <nav>
        <div className="nav-wrapper blue-grey darken-4">
          <div className="container">
            <Link to="/" className="brand-logo">
              WebDev
            </Link>
            <a to="#" data-target="mobile-demo" className="sidenav-trigger">
              <i className="material-icons">menu</i>
            </a>
            <ul className="right hide-on-med-and-down">
              <li>
                <Link to="!#" className="sidenav-close">
                  Developers
                </Link>
              </li>
              <li>
                <Link to="/register" className="sidenav-close">
                  Register
                </Link>
              </li>
              <li>
                <Link to="/login" className="sidenav-close">
                  Login
                </Link>
              </li>
            </ul>
          </div>
        </div>
      </nav>

      <ul className="sidenav blue-grey darken-4" id="mobile-demo">
        <li>
          <Link to="!#" className="sidenav-close">
            Developers
          </Link>
        </li>
        <li>
          <Link to="/register" className="sidenav-close">
            Register
          </Link>
        </li>
        <li>
          <Link to="/login" className="sidenav-close">
            Login
          </Link>
        </li>
      </ul>
    </div>
  );
};
export default Navbarguest;

下面是完整的代码

const Navbar = ({ auth: { isAuthenticated, loading }, logout }) => {
  useEffect(() => {
    var elem = document.querySelector(".sidenav");
    var instance = M.Sidenav.init(elem, {
      edge: "left",
      inDuration: 250
    });
  },[loading,isAuthenticated]);

  return (
    <div>
      {!loading && (
        <Fragment>
          {isAuthenticated ? (
            <div>
              <nav>
                <div className="nav-wrapper blue-grey darken-4">
                  <div className="container">
                    <Link to="/" className="brand-logo sidenav-close">
                      WebDev
                    </Link>
                    <a
                      to="#"
                      data-target="mobile-demo"
                      className="sidenav-trigger"
                    >
                      <i className="material-icons">menu</i>
                    </a>
                    <ul className="right hide-on-med-and-down">
                      <li>
                        <Link onClick={logout} to="/" className="sidenav-close">
                          Logout
                        </Link>
                      </li>
                    </ul>
                  </div>
                </div>
              </nav>

              <ul className="sidenav blue-grey darken-4" id="mobile-demo">
                <li>
                  <Link onClick={logout} to="/" className="sidenav-close">
                    Logout
                  </Link>
                </li>
              </ul>
            </div>
          ) : (
            <Navbarguest />
          )}
        </Fragment>
      )}
    </div>
  );
};
Navbar.prototype = {
  logout: PropTypes.func.isRequired,
  auth: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
  auth: state.auth
});

const-Navbar=（{auth:{isAuthenticated，loading}，logout}）=>{
useffect（（）=>{
var elem=document.querySelector（“.sidenav”）；
var instance=M.Sidenav.init（elem{
边缘：“左”，
硬结：250
});
}，[加载，未验证]；
返回(
{！正在加载&&(
{是否已验证(
网络开发者
菜单


注销




注销


) : (
)}
)}
);
};
Navbar.prototype={
注销：需要PropTypes.func.isRequired，
auth:PropTypes.object.isRequired
};
常量mapStateToProps=状态=>({
auth:state.auth
});

const Navbar = ({ auth: { isAuthenticated, loading }, logout }) => {
  useEffect(() => {
    var elem = document.querySelector(".sidenav");
    var instance = M.Sidenav.init(elem, {
      edge: "left",
      inDuration: 250
    });
  },[loading,isAuthenticated]);

  return (
    <div>
      {!loading && (
        <Fragment>
          {isAuthenticated ? (
            <div>
              <nav>
                <div className="nav-wrapper blue-grey darken-4">
                  <div className="container">
                    <Link to="/" className="brand-logo sidenav-close">
                      WebDev
                    </Link>
                    <a
                      to="#"
                      data-target="mobile-demo"
                      className="sidenav-trigger"
                    >
                      <i className="material-icons">menu</i>
                    </a>
                    <ul className="right hide-on-med-and-down">
                      <li>
                        <Link onClick={logout} to="/" className="sidenav-close">
                          Logout
                        </Link>
                      </li>
                    </ul>
                  </div>
                </div>
              </nav>

              <ul className="sidenav blue-grey darken-4" id="mobile-demo">
                <li>
                  <Link onClick={logout} to="/" className="sidenav-close">
                    Logout
                  </Link>
                </li>
              </ul>
            </div>
          ) : (
            <Navbarguest />
          )}
        </Fragment>
      )}
    </div>
  );
};
Navbar.prototype = {
  logout: PropTypes.func.isRequired,
  auth: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
  auth: state.auth
});