0

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.

3
  • Si eliminas el componente <BrowserRouter> del <Header> component y lo mueves <Header> dentro del <BrowserRouter> principal en <App> funciona? el 13 oct. 2020 a las 8:04
  • Yo finalmente pude "resolver", funciona quitandole el <BrowserRouter> en el Header. Pero digo "resolver" porque honestamente lo que hice fue instalar nueva vez a react y como el proyecto estaba iniciando, re-escribí los componentes que tenia hecho y funciona de momento. Ojalá y no me vuelva a pasar porque no sabría como resolver eso.
    – gbelen
    el 15 oct. 2020 a las 3:56
  • Tengo el mismo problema y si quito el <BrowserRouter> me dice: Error: Invariant failed: You should not use <Switch> outside a <BrowserRouter> alguna solución?
    – John Doe
    el 18 oct. 2021 a las 8:42

1 respuesta 1

0

El error se soluciona modificando el index.js en el root por defecto esta:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Lo que se debe hacer es dejar solo la etiqueta:

root.render(
    <App />
);

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.