使用 Navbar 和 LinkContainer 的动态链接

Question

我有一个关于在 LinkContainer 中使用导航栏的问题。

我目前正在开发一个 react 网站项目，我正在使用 react bootstrap 构建一个不错的导航栏。用户可以选择登录网站，登录后，连接到 AWS 的后端会获取有关该用户的一些信息（更具体地说，是用户的字符）。然后，此信息应成为导航栏的一部分，作为下拉列表的项目。 我的问题是，由于我使用的是 LinkContainer，因此导航栏本身不会在用户登录时重新呈现自己，因此它不会使用所需的数据更新自己。一旦用户刷新页面，信息就在那里，但他需要刷新..

我的问题与导航栏中的“隐藏”和“取消隐藏”链接不一样！

在用户登录之前，我没有用户详细信息（字符）的信息，因此我无法根据用户的身份验证状态隐藏链接。

我的一个解决方案是在用户登录后简单地使用window.location.reload();，但整个页面自行刷新看起来很糟糕，我想知道是否有更优雅的方法来解决这个问题。

现在是有趣的部分，代码： 这是我的导航条代码的一个小简介（最重要的部分是它中间的函数）：

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

所以这里发生的事情是我有一个函数，即add_characters_list()，它为用户拥有的每个字符返回一个下拉元素。它工作正常，但同样，只有在整个导航栏更新时。 这是函数：

  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
    );
  }

我知道问题在于我对 LinkContainer 的使用，这使得渲染在导航栏“外部”完成，但我想知道是否有更好的方法来做到这一点。我一直在阅读，但找不到比我之前提到的更优雅的解决方案。

抱歉发了这么长的帖子，感谢您的帮助！

编辑：这个问题还没有回答，所以我不会发布新问题，而是编辑这个问题并提供更多细节。 再次感谢您

Answer 1

您需要将您的Navbar 链接到用户身份验证的状态。

看到这个：How to hide nav bar in login & signup page in react?