• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Pruebas Online
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

294
Vistas
TypeError: no se pueden leer las propiedades de undefined (leyendo 'ubicación')

Ocurre un error en el siguiente código

history.location.pathname arroja el error (número de línea: 3 y 6)

 const LinkList = () => { const history = useHistory(); const isNewPage = history.location.pathname.includes( 'new' ); const pageIndexParams = history.location.pathname.split( '/' ); const page = parseInt( pageIndexParams[pageIndexParams.length - 1] );

He intentado todas las soluciones dadas, pero aún se produce el error.

Aplicación.js

 const App = () => { return ( <div className="center w85"> <Header /> <div className="ph3 pv1 background-gray"> <Routes> <Route exact path="/" render={() => <Redirect to="/new/1" />} /> <Route exact path="/create" element={<CreateLink />} /> <Route exact path="/login" element={<Login />} /> <Route exact path="/search" element={<Search />} /> <Route exact path="/home" element={<LinkList />} /> <Route exact path="/new/:page" element={<LinkList />} /> </Routes> </div> </div> ); };

Dependencias:

 "react-router": "^5.2.0", "react-router-dom": "^6.0.2",
almost 3 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

En react-router-dom ya no hay un gancho useHistory , fue reemplazado por un gancho useNavigate que devuelve una función de navigate en lugar de un objeto de history .

Para obtener la ubicación actual, use el useLocation . De todos modos, ya debería haber estado usando el objeto de location en lugar del objeto de history de acuerdo con los documentos v5, ya que el objeto de history es mutable.

 const LinkList = () => { const { pathname } = useLocation(); const isNewPage = pathname.includes('new'); const pageIndexParams = pathname.split('/'); const page = parseInt( pageIndexParams[pageIndexParams.length - 1] ); ...

También es probable que pueda eliminar la dependencia del react-router react-router-dom generalmente vuelve a exportar todos los componentes react-router o, como mínimo, también lo cambia a v6 para que no haya conflicto de versiones entre ellos.

La Redirect fue reemplazada por el componente Navigate en RRDv6, la nueva sintaxis para representar una redirección es la siguiente:

 <Route path="/" element={<Navigate to="/new/1" replace />} />

Además, en RRDv6 todas las rutas de ruta ahora siempre coinciden exactamente, la propiedad exact no es parte de la API del componente de Route .

almost 3 years ago · Juan Pablo Isaza Denunciar

0

puede usar useLocation hook o window.location.pathname para acceder al nombre de la ruta

useLocation devuelve el objeto de ubicación actual. let ubicación=usarUbicación() let ruta=ubicación.nombreruta

almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda