pokemon.trade/app/javascript/packs/frontend/components/layout/application_layout.jsx

import React from 'react';
import {Navbar, Nav, NavDropdown, Form, FormControl, Button} from 'react-bootstrap';
import {LinkContainer} from 'react-router-bootstrap';

class ApplicationLayout extends React.Component {
  render() {
    return (
      <div>
        <nav>
          <Navbar expand="lg">
            <LinkContainer to="/">
              <Navbar.Brand>React-Bootstrap</Navbar.Brand>
            </LinkContainer>
            <Navbar.Toggle aria-controls="basic-navbar-nav" />
            <Navbar.Collapse id="basic-navbar-nav">
              <Nav className="mr-auto">
                <Nav.Link href="#home">Home</Nav.Link>
                <Nav.Link href="#link">Link</Nav.Link>
                <NavDropdown title="Dropdown" id="basic-nav-dropdown">
                  <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
                  <NavDropdown.Item href="#action/3.2">Another Action</NavDropdown.Item>
                  <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
                  <NavDropdown.Divider />
                  <NavDropdown.Item href="#action/3.4">Separated Link</NavDropdown.Item>
                </NavDropdown>
              </Nav>
              <Form inline>
                <FormControl type="text" placeholder="Search" className="mr-sm-2" />
                <Button variant="primary">Search</Button>
              </Form>
            </Navbar.Collapse>
          </Navbar>
        </nav>

        <div>{this.props.children}</div>
      </div>
    );
  }
}

export default ApplicationLayout;