0

I have a question about the use of Navbar with LinkContainer.

I am currently working on a react website project, and I am using react bootstrap to build a nice Navbar. There is an option for a user to log in to the website, and after logging in, the backend, that is connected to AWS, goes and takes some information about that user (Characters of the user, to be more specific). This information should then be a part of the Navbar, as items of a dropdown list. My issue is, that since I am using LinkContainer, the Navbar itself does not re-render itself whenever the user has been logged in, so its not updating itself with the needed data. Once the user refresh the page, the information is there, but he needs to refresh..

My problem is not the same as the 'hide' and 'unhide' links in the navbar!

Before the user logs in, I have no information of the user details (characters) so I cant have the links hidden based on the users' auth state.

One solution that I have is to simply use window.location.reload(); after the user is logged in, but it just looks bad that the whole page refreses itself, and I was wondering if there is a more elegant way to solve this problem.

Now for the interesting part, the code: Here is a small brief of my Navbar code (The most important part is the function in the middle of it):

<Navbar bg="#212121" expand="lg" variant="dark">
  <LinkContainer to="/">
    <Navbar.Brand>Main</Navbar.Brand>
   </LinkContainer>
   <Navbar.Toggle aria-controls="basic-navbar-nav" />
     <Navbar.Collapse id="basic-navbar-nav">
       <Nav className="mr-auto">
         <LinkContainer to="/info">
            <Nav.Link>information</Nav.Link>
         </LinkContainer>
         <NavDropdown title="My Characters" id="basic-nav-dropdown">
            {add_characters_list()}
         </NavDropdown>
       </Nav>
     </Navbar.Collapse>
 </Navbar>

So whats happening here is that I have a function, namely add_characters_list() that returns a dropdown element for each character that the user have. It's working fine, but again, only when the whole Navbar is updated. Here is the function:

  function add_characters_list() {
    return [{}].concat(characters).map(
      (characters, i) =>
        i !== 0
          ?
          <NavDropdown.Item>
            <LinkContainer to={`/characters/${characters.charid}`}>
             <p className="testing">{characters.char_name}</p>
            </LinkContainer>
          </NavDropdown.Item>
          : null
    );
  }

I know that the problem is my use of LinkContainer, that makes the rendering being done 'outside' of the Navbar, but I was wondering if there is a better way to do it. I have been reading all over but couldn't find a more elegant solution than the one I mentioned before.

Sorry for the long post, and thank you for your help!

Edit: This question hasn't been answered yet, so instead of posting a new one, I'll edit this one with some more details.. Thank you again

  • Possible duplicate of [How to hide nav bar in login & signup page in react?](https://stackoverflow.com/questions/35716594/how-to-hide-nav-bar-in-login-signup-page-in-react) – Phil Lucks Oct 11 '19 at 02:20
  • Please read again my description. It is not the same –  Oct 11 '19 at 02:39

1 Answers1

0

you will need to have your Navbar linked to the state of the user Auth.

see this: How to hide nav bar in login & signup page in react?

Phil Lucks
  • 2,704
  • 6
  • 31
  • 57
  • I have the Navbar linked. And I have my signup and login page hidden and unhidden based on the user auth state. This problem is not the same. My problem is when the user logs in, I have an async function that queries for some other information and that information need to be displayed on the navbar. This means that it cant be 'hidden' at no stage, because before the user logs in, I dont have any way to know what the user characters are. –  Oct 11 '19 at 02:34