Как заставить Navbar показывать, используя реагирующий ремень?

Question

Я использую реагирующий ремень для создания панели навигации вверху моей страницы.По какой-то причине эта панель навигации не отображается.Отображаются только ссылки, но не цветная полоса.И ссылки отображаются в виде списка ul.Я не уверен, почему.

Я пробовал многочисленные решения, которые я нашел в Интернете, и ни одно из них не работает.Я не уверен, правильно ли настроено мое приложение в webpackconfig или что-то в моем компоненте является проблемой.

app.js

const App = () => (

  <div className="container-fluid">
          <div className="row">
              <main className="main-content col-lg-12 col-md-12 col-sm-12 
    p-0">
                <AppNavBar />
                  <div className="main-content-container container-fluid 
px-4">
                      <Route path="/" exact={true} component={Home}/>
                  </div>
              </main>
          </div>
    </div>
   )


export default App

index.js

render(
<Provider store={store}>
<ConnectedRouter history={history}>
  <App/>
 </ConnectedRouter>
</Provider>,
target
);  

AppNavBar.js

export default class AppNavBar extends Component{
constructor(props){
    super(props);
    this.state={
            collapse: false,
    };
    this.onClick=this.onClick.bind(this);
}

onClick(){
    this.setState({
        collapse: !this.state.collapse,
    });
}

render(){
    return(
        <div>

    <Navbar fixed="top" color="dark" dark expand="md">
     <NavbarBrand href="/">RFID Management</NavbarBrand>
     <Nav className="ml-auto" navbar>
     <NavItem>
     <NavLink tag={Link} to="/addveh">Add New Vehicle</NavLink>
     </NavItem>

      </Nav>

    </Navbar>
    </div>
);
}
 }  

Если мой файл webpackconfig нужно увидеть, я тоже могу это добавить.Я просто хочу, чтобы моя навигация отображалась правильно.Спасибо!