It appears that the Navbar component is rendering its children inside li elements. By wrapping them in a fragment, all NavLink elements are treated as one child element and placed within a single li.
To address this issue, here are two straightforward solutions:
- If there are only a few links, you can use conditional rendering:
<Navbar>
{isAuthenticated && (<NavLink to="/locations" href="/locations">Locations</NavLink>)}
{isAuthenticated && (<NavLink to="/categories" href="/categories">Categories</NavLink>)}
</Navbar>
However, this approach may not be ideal for a large number of links.
- Store the
NavLink elements in an array and conditionally add authentication-dependent items:
// In the component:
const links = [/* some public links */];
const privateLinks = [
// Make sure to include keys. The numbers used here are just examples.
<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>
The logic involving the links arrays is simple (placing private links at the end) for demonstration purposes.