隐藏reactJS中的导航栏

问题描述

我正在尝试隐藏登录页面中的导航栏，但是经过大量尝试后仍未找到它。这就是我的代码：

function App(props) {
  var [isNavbarHidden,setIsNavbarHidden] = useState(false);


  useEffect((props) => {
const HiddenNavbar = () =>setIsNavbarHidden = true ;
  });

  return (
    <>
      <Router>
        {isNavbarHidden ? null : <Navbar />}
        <Switch> 
        <Login path='/' {props.HiddenNavbar} />
        <Route path="/" exact component={Home} />
        <Route path="/Events" component={Events} />
        <Route path="/Support" component={Support} />
        <Route path="/Payments" component={Payments} />
        <Route path="/Classes" component={Classes} />
        <Route path="/Employees" component={Employees} />
        <Route path="/Students" component={Students} />
        <Route path="/Charges" component={Charges} />
        </Switch>
      </Router>
    </>
  );
}

export default App;

我在等你的帮忙..

解决方法

第一件事：

useEffect((props) => {
    const HiddenNavbar = () =>setIsNavbarHidden = true ;
});

这里，您仅创建一个名为HiddenNavbar的函数，该函数在调用时会将setIsNavbarHidden更改为true。首先，您永远不会调用它；其次，setIsNavbarHidden是一个函数，而不是一个值。

您想要做的是：

useEffect((props) => {
    setIsNavbarHidden(true);
},[]);

我们的姓氏是：D

好吧Okba，所以首先让我告诉您，处理此问题通常需要您设置两个路由器组，一个组说“ / app / *”包含应用程序，另一个可能是“ / auth”不包含标头组件，但正如我在这里看到的那样，这不是您正在做的事情，因此将向您展示如何这样做，但这不是一个好习惯，首先请除去app函数中的useEffect并将setIsNavbarHidden函数作为道具传递到Login组件或页面，然后在Login组件的安装位置上运行useEffect，标题将被隐藏，所以这是您可以使用的代码的模型

App.js

function App(props) {
  var [isNavbarHidden,setIsNavbarHidden] = useState(false);




  return (
    <>
      <Router>
        {isNavbarHidden ? null : <Navbar />}
        <Switch> 
        <Route path="/" exact component={Home} />
        <Route path='/login'  render={() => <Login  setNavbar={setIsNavbarHidden}  />}/>
        <Route path="/Events" component={Events} />
        <Route path="/Support" component={Support} />
        <Route path="/Payments" component={Payments} />
        <Route path="/Classes" component={Classes} />
        <Route path="/Employees" component={Employees} />
        <Route path="/Students" component={Students} />
        <Route path="/Charges" component={Charges} />
        </Switch>
      </Router>
    </>
  );
}

export default App;

import React from "react";

export default function Login({ setNavbar }) {
  useEffect(() => {
    setNavbar(true);
  },[]);
  return <div>// login Code //</div>;
}

reactjs reactjs