如何在某些组件上隐藏侧边导航？答案

【问题标题】：How can I hide side navigation on some components?如何在某些组件上隐藏侧边导航？
【发布时间】：2021-01-29 23:55:35
【问题描述】：

因为我是 ReactJS 的新手。我尝试了许多解决方案来在不同组件上实现显示/隐藏侧边菜单。

要求是：

一个。当用户登录后，所有组件都会显示侧边菜单。

b.当用户注销时，它只显示一些组件，如忘记密码或条款和条件（菜单名称根据身份验证更改），但隐藏在登录组件上。

App.js

<Router>
  <SideNavigation />           
  <Routes />
</Router>

Routes.js

<Switch>
  <Route exact path="/login" component={Login} />
  <Route exact path="/forgotPassword" component={ForgotPassword} />
  <Route exact path="/termAndCondition" component={TermAndCondition} />
  <PrivateRoutes exact path="/" component={Dashboard} />
  <PrivateRoutes exact path="/emp" component={Employee} />
  <PrivateRoutes exact path="/empList" component={EmployeeList} />
</Switch>

【问题讨论】：

这可能会有所帮助，请检查simple-conditional-routing-in-reactjs
看到这个reactrouter.com/web/example/auth-workflow。
嗨@NooruddinLakhani ....感谢您的回复.........我的情况有所不同...当用户登录但当用户登录时，我必须显示侧面导航注销然后我必须仅从登录页面隐藏侧面导航并在忘记密码页面上显示....在这种情况下，它会从忘记密码页面隐藏侧面导航...这实际上并不是要求...... ......谢谢

标签： javascript reactjs react-native react-router router

【解决方案1】：

使用简单的状态变量并在您的App.js 中跟踪登录状态。（例如 - 通过下面的 useState() 钩子?）

const [isLoggedIn, setIsLoggedIn] = useState(false);

将回调函数传递给Routes 组件，然后再传递给Login 组件。

<Routes onLogIn={()=>setIsLoggedIn(true)}/>

Routes.js 假设它是一个功能组件（使用 this.props 作为类组件）。

<Route exact path="/login" >
    <Login onLogIn={props.onLogIn}/>
</Route>

然后您可以从登录组件调用onLogIn() 函数并更新状态。现在，再次在App.js -

const [isLoggedIn, setIsLoggedIn] = useState(false);
const [canShowNav, setCanShowNav] = useState(false);
const [currentComponent, setCurrentComponent] = useState(''); //default component shown

useEffect(()=>{                        //for determining canShowNav's value
    if(isLoggedIn)setCanShowNav(true)
    else{
        if(currentComponent === 'login'){ //add any other components you want where nav should not be shown
            setCanShowNav(false)
        }
        else setCanShowNav(true)
    }
}, [isLoggedIn, currentComponent])     

return(
    <Router>
      {canShowNav && <SideNavigation onComponentChange={(component)=>setCurrentComponent(component)}/>}           
      <Routes onComponentChange={(component)=>setCurrentComponent(component)} onLogIn={()=>setIsLoggedIn(true)}/>
    </Router>
)

然后在单击链接时从SideNavigation 调用onComponentChange("componentName")，传递被单击的组件名称。
您也可以将onComponentChange 函数传递给登录页面，以在用户单击Forgot Password 或类似内容时更改状态并更新状态。
Routes.js

<Route exact path="/login" >
    <Login onLogIn={props.onLogIn} onComponentChange={props.onComponentChange}/>
</Route>

如果对你有帮助，请告诉我！✌

【讨论】：