React - 用户登录后如何在导航栏中隐藏注册/登录？

Question

I want to be able to hide the links to register and log in once a user has logged in. I'm using react.

Here are the links in my nav:

<Navbar>
 <Nav.Item>
            <Nav.Link href="/Register">Register</Nav.Link>
          </Nav.Item>
          <Nav.Item>
            <Nav.Link href="/Login">Login</Nav.Link>
          </Nav.Item>
</Navbar>

I'm using local storage for the login:

localStorage.setItem("userID", user);

Answer 1

you can get the item with localStorage.getItem('userID') and use it to hide the links

<Navbar>
          {!localStorage.getItem('userID') && (
            <Nav.Item>
          
              <Nav.Link href="/Register">Register</Nav.Link>
            </Nav.Item>
            <Nav.Item>
              <Nav.Link href="/Login">Login</Nav.Link>
            </Nav.Item>
          )}
</Navbar>

this way the links will only be displayed if localStorage.getItem('userID') is undefined or has any falsy value