Materialise 导航栏链接条件渲染

Question

我正在使用 React Materialize 和 React Router Dom。我试图仅向经过身份验证的用户显示导航链接，因此我使用的是条件呈现。但是如果我像下面那样做，导航链接呈现为垂直，而不是像往常一样水平。有解决办法吗？谢谢

    <Navbar>
      {isAuthenticated && (
      <>
      <NavLink to="/locations" href="/locations">
        Locations
      </NavLink>
      <NavLink to="/categories" href="/categories">
        Categories
      </NavLink>
      </>
      )}
    </Navbar>

Answer 1

看起来 Navbar 组件正在渲染 li 元素内的所有子项。当您将它们包装在片段中时，组件会将其视为其唯一的子元素，并将所有 NavLink 元素放在一个 li.

中

我可以想到两种简单的方法来处理这个问题：

如果只有几个链接，可以对它们进行条件渲染：

<Navbar>
 {isAuthenticated && (<NavLink to="/locations" href="/locations">Locations</NavLink>)}
 {isAuthenticated && (<NavLink to="/categories" href="/categories">Categories</NavLink>)}
</Navbar>

但是，此解决方案并不可靠，尤其是当您有很多链接时。

将 NavLink 元素存储在某个数组中并有条件地添加 auth-dependant 项：

// In the component:
const links = [/* some public links */];
const privateLinks = [
    // Don't forget keys. The numbers here are only for example.
    <NavLink key={1} to="/locations" href="/locations">Locations</NavLink>,
    <NavLink key={2} to="/categories" href="/categories">Categories</NavLink>
];

if(isAuthenticated){
 links.push(...privateLinks);
}

// In the template:
<Navbar>{links}</Navbar>

链接数组的逻辑非常简单（将私有链接设置为最后一项）只是为了让演示更简单。

Materialise 导航栏链接条件渲染

Materialize navbar links conditional rendering

css

reactjs

navbar

materialize