Question

我对将Navbar与LinkContainer结合使用有疑问。

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

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

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

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

现在，有趣的部分是代码：这是我的Navbar代码的简短摘要（最重要的部分是其中的功能）：

<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的使用，这使得渲染在Navbar的“外部”完成，但是我想知道是否有更好的方法可以做到。我一直在阅读，但找不到比我前面提到的解决方案更优雅的解决方案。

很长的帖子，很抱歉，谢谢您的帮助！

编辑：此问题尚未得到解答，因此，除了发布新的问题，我将对它进行更多详细的编辑。再次谢谢你

Answer 1

您需要将Navbar链接到用户Auth的状态。

查看此内容：How to hide nav bar in login & signup page in react?

与Navbar和LinkContainer的动态链接

1 个答案: