如果用户未登录反应如何隐藏导航

Question

路由.js

const Layout = () => {
const SecuredRoute = ({ ...props }) => (
    console.log(props.path),
    <Route path={props.path} render={(data) => (
      console.log(data),
      localStorage.getItem('accessToken')
        ? <props.render {...data} />
        : <Redirect to='/login' />
    )} />
  )

return (
    <>
        <BrowserRouter>
            <Navbar />  // It needs to be hidden if user is not logged in
            <div className='layout'>
                <Switch>
                    <Route exact path='/home' component={Home} />
                    <Route exact path='/login' component={Login} />
                    <SecuredRoute exact path='/about' component={About} />
                    <Route exact path='/contact' component={Contact} />
                    <Route exact path='/add' component={AddBlog} />
                    <Route exact path='/edit/:id' component={UpdateBlog} />
                    <Route exact path='/blog/:id' component={Blogdetail} />
                    <Route component={Home} />
                </Switch>
            </div>
            <Footer />
        </BrowserRouter>
    </>
)
}

 export default Layout

我想如果用户未登录，则必须隐藏导航栏。 这意味着当 route = '/login' 需要隐藏导航栏。 你已经尝试了很多东西，但没有任何效果。 我是 React 的新手。 任何帮助将不胜感激？

Answer 1

您可以创建一个 boolean 变量并将其短路。

render() {
  const visible = true;
  const notVisible = false;

  return (
    <div>
      {visible && <p>I am visible</p>}
      {notVisible && <p>I am not visible</p>}
    </div>
  );
}

Answer 2

在我的朋友的Navbar组件中试试这个：

const [loggedIn, setLoggedIn] = useState(false);
const Layout = () => {
const SecuredRoute = ({ ...props }) => (
    console.log(props.path),
    <Route path={props.path} render={(data) => (
      console.log(data),
      localStorage.getItem('accessToken')
        ? <props.render {...data} />
        : <Redirect to='/login' />
    )} />
  )

return (
    <>
        <BrowserRouter>
            <Navbar loggedIn={loggedIn} />  // It needs to be hidden if user is not logged in
            <div className='layout'>
                <Switch>
                    <Route exact path='/home' component={Home} />
                    <Route exact path='/login' component={() => <Login setLoggedIn={setLoggedIn} />} />
                    <SecuredRoute exact path='/about' component={About} />
                    <Route exact path='/contact' component={Contact} />
                    <Route exact path='/add' component={AddBlog} />
                    <Route exact path='/edit/:id' component={UpdateBlog} />
                    <Route exact path='/blog/:id' component={Blogdetail} />
                    <Route component={Home} />
                </Switch>
            </div>
            <Footer />
        </BrowserRouter>
    </>
)
}

 export default Layout

我给登录组件一个 setState。 当用户登录时，您会给出真正的 boolean， loggedIn(true)和父 state 更改。 在Navbar组件中：

return(
      loggedIn
      ?
      //The Body of NavBar
      :
      ""
      }
)