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

Question

Route.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

I want if the user is not logged in then navbar must be hidden. It means when route = '/login' navbar needs to be hidden. u have tried out many things but nothing works. I am new to React. Any help will be appreciated?

Answer 1

You can create a boolean variable and short-circuit it.

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

Try this in the Navbar component my friend:

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

I gave a setState to login component. You give a true boolean when the user logs in, loggedIn(true) and the parent state changes. And in the Navbar component:

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