1

Hola a todos estoy aprendiendo sobre react y en este momento mas concretamente sobre react router. Estoy usando la versión 5.2.0 del mismo. Sé que ya esta la versión 6 pero esa la aprenderé después. El problema es que al usar Link para el menú de navegación al darle click me cambia la ruta y se puede ver en la url pero no me renderiza la nueva página.

El siguiente código es el que uso en el componente NavBar.jsx.

import { Link } from "react-router-dom"

export default function NavBar() {
  return (
    <nav>
      <ul>
        <li>
          <Link to="/">Inicio</Link>
        </li>
        <li>
          <Link to="/nosotros">Nosotros</Link>
        </li>
        <li>
          <Link to="/servicios">Servicios</Link>
        </li>
        <li>
          <Link to="/contactos">Contactos</Link>
        </li>
      </ul>
    </nav>
  )
}

Y así lo estoy renderizando en mi archivo llamado AppRouter.js:

import { Switch } from "react-router-dom"
import { BrowserRouter as Router, Route } from "react-router-dom"
import NavBar from "./components/NavBar"
import ContactosPage from "./pages/ContactosPage"
import InicioPage from "./pages/InicioPage"
import NosotrosPage from "./pages/NosotrosPage"
import NotFoundPage from "./pages/NotFoundPage"
import ServiciosPage from "./pages/ServiciosPage"

export default function AppRouter() {
  return (
    <Router>
      <NavBar />
      <Switch>
        <Route path="/nosotros">
          <NosotrosPage />
        </Route>
        <Route path="/contactos">
          <ContactosPage />
        </Route>
        <Route path="/servicios">
          <ServiciosPage />
        </Route>
        <Route exact path="/">
          <InicioPage />
        </Route>
        <Route path="*">
          <NotFoundPage />
        </Route>
      </Switch>
    </Router>
  )
}
2
  • Parece que tu error no se puede reproducir. He probado tu código y funciona perfectamente. el 5 jun. 2022 a las 21:56
  • @JaimeMenéndez gracias por responder a mi pregunta intentare hacerlo nuevamente creando otro proyecto react.
    – Hamiltonps
    el 5 jun. 2022 a las 22:08

1 respuesta 1

1

Bueno compañeros ya lo resolví por algún motivo que desconozco pero que seguro que alguno de ustedes sabrá y si es así por favor pongalo como respuesta,cuando cramos un proyecto con npx create-react-app este en el archivo index.js pone el siguiente codigo

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

El problema es que al parecer se esta ejecutando el renderizado en modo extricto, repito no tengo idea que hace React.StrictMode o que es lo que limita. El punto es que quitando el React.StrictMode funciono bien como se esperaba. el codigo de Index.js quedo asi:

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

La otra alternativa es actualizar la versión de React router a la 5.3.3 ya que en esta se encuentra solucionado el problema por lo que podemos seguir usando el modo estricto de React. Entonces el codigo de index.js quedaria como antes de modificarlo asi:

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

para actualizar la versión de React router se debe ingresar desde la consola a la carpeta del proyecto y ejecutar en siguiente comando. npm i react-router-dom@5.3.3 Luego verificamos en el archivo package.json que si se realizo el cambio.

6
  • 1
    ¡Muy buen aporte!. Al parecer, como denota este issue en github, el modo estricto de React 18 no es compatible con React Router v5. La alternativa más recomendada es usar la versión 6, pero está bueno que expongas esa solución temporal para quien se encuentre con el mismo problema. No sabía de esa incompatibilidad. el 5 jun. 2022 a las 23:14
  • 1
    Muchas gracias @JaimeMenéndez por compartir que el problema es incompatibilidad. creo que debo entonces cambiar el titulo de la pregunta para que sea mas acorde al problema. Aunque veo que ya lo hiciste muchas gracias.
    – Hamiltonps
    el 5 jun. 2022 a las 23:24
  • 1
    De cualquier forma Hamiltonps, investigando un poco, resulta que el problema ya fue arreglado en la versión de react router 5.3.3. Considera actualizar a esa versión en lugar de remover el strinct-mode. Puedes seguir usando la version 5, solo que muévete a la 5.3.3 donde arreglan el problema. el 5 jun. 2022 a las 23:30
  • Gracias @JaimeMenéndez probaré esta solución.
    – Hamiltonps
    el 5 jun. 2022 a las 23:32
  • 1
    @JaimeMenéndez efectivamente al actualizar la version del react router a la 5.3.3 funciona bien con react 18 en modo estricto.
    – Hamiltonps
    el 5 jun. 2022 a las 23:44

Tu Respuesta

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

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