Hola estoy haciendo una web sencilla para aprender React. Me he creado los componentes que van a contener las páginas y los he envuelto en y como dice la documentación, pero al hacer clic en el link que se supone me debe llevar a esa pagina, solo cambia la url pero no renderiza la vista.
Si hago refresh entonces aparece el componente bien.
Mas abajo coloco mi código
en App.js, tengo esto.
function App() {
const dateYear = new Date().getFullYear();
return (
<Fragment>
<Header appname="FlexiVoucherAPP" />
<BrowserRouter>
<Switch>
<Route path="/" exact component={HomePage} />
<Route path="/nosotros" component={AboutPage} />
<Route path="/login" component={LoginPage} />
</Switch>
</BrowserRouter>
<Footer dateYear={dateYear} />
</Fragment>
);
}
export default App;
Y en el Header tengo esto:
import { BrowserRouter, Link } from "react-router-dom";
const Header = ({ appname }) => (
<Fragment>
<BrowserRouter>
<nav className="navbar mainMenu navbar-expand navbar-light bg-light fixed-top">
<Link to="/" className="navbar-brand">
{appname}
</Link>
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="navbar-nav ml-auto">
<li className="nav-item wrapIngresar">
<Link to="/login" className="nav-link active">
<i className="fa fa-user-o" aria-hidden="true"></i> Ingresar
</Link>
</li>
{/* <li className="nav-item wrapLogged">
<Link to="/account">
<span>JS</span>
Hola, José Santorini
</Link>
</li> */}
<li className="nav-item dropdown">
<a
className="nav-link dropdown-toggle wrapSandwich"
href="!#"
id="navbarDropdown"
role="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<span className="iconbar"></span>
<span className="iconbar"></span>
<span className="iconbar"></span>
</a>
<div className="dropdown-menu" aria-labelledby="navbarDropdown">
<Link to="/nosotros" className="dropdown-item">
Sobre Flexi Voucher
</Link>
<Link to="/ayuda" className="dropdown-item">
Ayuda
</Link>
<Link to="/faqs" className="dropdown-item">
Preguntas frecuentes
</Link>
</div>
</li>
</ul>
</div>
</nav>
</BrowserRouter>
</Fragment>
);
export default Header;
Me he cansado de buscar el error y nada de error, solo no funciona y ya.