• Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Precios
    • Pruebas
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

155
Vistas
TypeError: Cannot read properties of undefined (reading 'location')

Error occuring in the following code

history.location.pathname is throwing up the error.(line number - 3 and 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]
  );

I have tried every solution given but still the error is occuring.

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>
  );
};

Dependencies:

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

0

In react-router-dom there is no longer a useHistory hook, it was replaced by a useNavigate hook that returns a navigate function instead of a history object.

To get the current location use the useLocation hook. You should have already been using the location object instead of the history object anyways according to the v5 docs as the history object is mutable.

const LinkList = () => {
  const { pathname } = useLocation();

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

  ...

You can also likely remove the react-router dependency since react-router-dom generally re-exports all the react-router components, or at a minimum also bump it to v6 so there's no versioning conflict between them.

Redirect was replaced by the Navigate component in RRDv6, the new syntax for rendering a redirect is as follows:

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

Also, in RRDv6 all route paths are now always exactly matched, the exact prop is not part of the Route component API.

9 months ago · Juan Pablo Isaza Denunciar

0

you can either use, useLocation hook or window.location.pathname to access the the pathname

useLocation returns the current location object. let location=useLocation() let path=location.pathname

9 months 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 empleo Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2023 PeakU Inc. All Rights Reserved.