react-bootstrap cant render Nav.Link - reactjs

Question

I'm currently developing a web application with React and react-bootstrap. Everything is runnning fine except the render process of my navigation area on the top of my webpage.
The problem looks as follows:
I want to display a element inside my navigation bar with a couple of elements. But everytime my page is displayed inside the web browser, the element Nav.Link isn't loaded and thus defined as undefined.
Hereis the corresponding file:
import React,{Component} from 'react';
import './HorizontalNavBar.css';
import atom from './res/atom.svg';
import file from './res/file_icon.svg';
import tag from './res/tag.svg';
import user from './res/user_icon.svg';
import {Navbar,Nav,NavDropdown,Form,FormControl} from 'react-bootstrap';
import { bootstrapUtils } from 'react-bootstrap/lib/utils';
class HorizontalNavBar extends React.Component
{
constructor(props)
{
super(props);
this.state =
{
actions:["Files","TagManager","Profile"],
};
}
render()
{
return(
<Navbar bg="dark" variant="dark" expand="lg">
<Navbar.Brand href="#">
<img
src={atom}
alt="Logo"/>
SciTag
</Navbar.Brand>
<Navbar.Collapse>
<Nav>
<Nav.Link href="#home">Home</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
);
}
}
export default HorizontalNavBar;
Here are a couple of things of solutions I've already tried out:
Checked the official documentation of react-bootstrap
Downloaded the Bootstrap Stylesheet again
Reconfigured webpack
Updated React to the latest stable version
Edit:
I've discovered the source of the error myself. While the latest documentation is explaining how developers can utilize react-bootstrap version 1.0.0-beta.5, I was using my < 1.0.0 version with the latest tutorials. Of course, this didn't work out because the components which are explained it the tutorials are not included in my setup. The solution was to download latest beta version and use the stylesheets from Bootstrap 4 and not Bootstrap 3.

Answer 1

Your issue is in the way you implemented it:
You put the NavLink in the Navbar.Collapse Wrapper. That Navbar.Collapse wrapper is part of ensuring a responsive behaviour of your navigation:
Use the expand prop as well as the Navbar.Toggle and Navbar.Collapse components to control when content collapses behind a button.
Please see here: https://react-bootstrap.github.io/components/navbar/
In fact, your NavLink item is there - but you do not see it because it is hidden unless you press the Navbar.Toggle item. Since you didn't implement the item for now, there is no way of seeing it at all.
Now you have two options: implementing the Navbar component without responsive behaviour or with it.
Option 1, without responsive behaviour (we removed the Navbar.Collapse wrapper):
<Navbar bg="dark" variant="dark" expand="lg">
<Navbar.Brand href="#">SciTag</Navbar.Brand>
<Nav>
<Nav.Link href="#home">Home</Nav.Link>
</Nav>
</Navbar>
Option 2, with responsive behaviour (we added the Navbar.Collapse wrapper with some options)
<Navbar collapseOnSelect bg="dark" variant="dark" expand="lg">
<Navbar.Brand href="#">SciTag</Navbar.Brand>
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
<Navbar.Collapse>
<Nav>
<Nav.Link href="#home">Home</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
Working sandbox: https://codesandbox.io/s/8l85rqqk8