1

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? Commented 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
    Commented 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
    Commented el 18 oct. 2021 a las 8:42

2 respuestas 2

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 />
);
0

Me ocurrio el mismo problema lo solucione modificando el archivo index.js de la siguiente forma:

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
import Cabecera from '../src/components/cabecera.jsx'
import Footer from '../src/components/footer.jsx'
import { BrowserRouter } from 'react-router-dom'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <BrowserRouter>
    <Cabecera></Cabecera>
    <App />
    <Footer></Footer>
    </BrowserRouter>
  </React.StrictMode>,
)

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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