He estado tratando de poner una barra de navegación en un proyecto React usando reactstrap. Pero la barra de navegación no muestra solo el h1 en la barra de navegación. La marca se representa por algunas razones. Traté de cambiar el estilo css, copié y pegué otras barras de navegación de ejemplo de diferentes sitios web y probé otras soluciones similares desde aquí, pero nada funcionó. Estoy usando React versión 17.0.2 y reactstrap versión 8.9.0.

Este es mi componente de la barra de navegación:

 import React, { Component } from 'react'; import { Navbar, NavbarBrand, Nav, NavbarToggler, Collapse, NavItem } from 'reactstrap'; //import { NavLink } from 'react-router-dom'; class Header extends Component { constructor(props) { super(props); this.state = { isNavOpen: false }; this.toggleNav = this.toggleNav.bind(this); } toggleNav() { this.setState({ isNavOpen: !this.state.isNavOpen }); } render() { return( <Navbar bg="dark" variant="dark"> <div className="container"> <NavbarToggler onClick={this.toggleNav} /> <NavbarBrand href="/"> <h1>Navbar</h1> </NavbarBrand> <Collapse isOpen={this.state.isNavOpen} navbar> <Nav navbar> <NavItem> <p>Test</p> </NavItem> </Nav> </Collapse> </div> </Navbar> ); } } export default Header;

Cómo se ve la barra de navegación

Soy bastante nuevo en React y Javascript en general, espero que alguien pueda ayudarme.