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.

  • es.davy.ai/
  • Programación /
  • ¿Cómo puedo obtener el historial de React Router Dom en la versión 6 con componentes de clase de React?

¿Cómo puedo obtener el historial de React Router Dom en la versión 6 con componentes de clase de React?

03 Jun, 2023 Programación

Necesito obtener el objeto history. Estoy usando la versión 6 de react-router-dom y también instalé react-router v6. Aquí está mi código de un componente de clase.

importar React, { Component } desde 'react'
importar { withRouter } desde 'react-router'

clase de blog extiende componente{
    render() {
        console.log(this.props)
        return (
            <div>
                <h4>Historia</h4>
            </div>
        )
    }
}
const B = withRouter(Blog)
export default B

Y lo importo a otro componente.

importar React, { Component } from 'react'
importar { BrowserRouter, Routes, Route, Navigate } desde 'react-router-dom'
importar B desde './pages/Blog'

clase Lección2 extiende componente{
    render() {
        volver (
            <BrowserRouter>
                <div>
                    <h4>Lección 2</h4>
                    <MainNav />
                    <Routes>
                        <Route path='/blog/' element={<B />}/>
                    </Routes>
                </div>
            </BrowserRouter >
        )
    }
}

exportar por defecto Lección2

Estoy obteniendo el error Attempted import error: 'withRouter' is not exported from 'react-router' aunque instalé tanto react-router como react-router-dom.

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    En la versión 6 de react-router-dom, se ha eliminado el componente de orden superior withRouter. En su lugar, puede utilizar el hook useNavigate para acceder al objeto history.

    Aquí está una versión actualizada de su componente Blog que utiliza el hook useNavigate para registrar el objeto history:

    import React from 'react';
import { useNavigate } from 'react-router-dom';

function Blog() {
  const navigate = useNavigate();
  console.log(navigate);

  return (
    <div>
      <h4>Historial</h4>
    </div>
  );
}

export default Blog;

    En su componente Lesson2, puede importar y utilizar el componente Blog actualizado de la siguiente manera:

    import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Blog from './pages/Blog';

function Lesson2() {
  return (
    <browserrouter>
      <div>
        <h4>Lección 2</h4>
        <mainnav></mainnav>
        <routes>
          <route path="/blog" element=""></route><blog></blog>} />
        </routes>
      </div>
    </browserrouter>
  );
}

export default Lesson2;

    Tenga en cuenta que en la versión 6 de react-router-dom se utiliza element en lugar de component en las definiciones de ruta.

Comments are closed.