es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

TypeError: No se pueden leer las propiedades de indefinido (leyendo ‘ubicación’)

13 Jul, 2023 Programación

Error ocurriendo en el siguiente código

history.location.pathname está generando el error. (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 probado todas las soluciones dadas pero sigue ocurriendo el error.

App.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",
Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    El error ocurre en las declaraciones de const isNewPage y const pageIndexParams. El objeto history está indefinido, lo que significa que no se puede acceder a history.location.

    Para solucionar esto, asegúrese de importar useHistory() de react-router-dom y usarlo correctamente dentro del componente funcional.

    Actualice el código de la siguiente manera:

    import { useHistory } from "react-router-dom";

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]);
  ...

    Asegúrese de usar useHistory() dentro de un componente funcional y de que react-router-dom esté instalado e importado correctamente.

Comments are closed.