Reaccionar con TypeScript: la propiedad ‘push’ no existe en el tipo ‘Historial’

Hola, descubrimos la solución a lo que andabas buscando, deslízate y la hallarás más abajo.

Solución:

ACTUALIZACIÓN: Encontré una nueva forma de hacer este tipo de cosas. Igual que b4, necesita instalarlos tipos:

1.- npm i react-router react-router-dom

2.- npm i -D @types/react-router @types/react-router-dom

import React from "react";
import  RouteComponentProps  from "react-router-dom";

interface MyComponentProps extends RouteComponentProps 
 someOfYourOwnProps: any;
 someMorePropsIfNeedIt: any;


interface MyComponentState 
  someProperty: any;
  another: any;


export class MyComponent extends React.Component 

    public state: MyComponentState;
    public constructor (props: MyComponentProps) 
        super(props);

        this.state = 
            someProperty: "",
            another: ""
        
    

    public onClickHandler (evt: React.MouseEvent): void 
        evt.preventDefault();
    

    public componentDidMount () 
        this.props.history;
    
   public render (): React.ReactElement 
        return (
            
trol
        )
    

---

hihitl sé lo que está pasando. Espero que aún lo necesites.

1.- npm i react-router react-router-dom

2.- npm i -D @types/react-router @types/react-router-dom

import React from "react";
import  History, LocationState  from "history";

interface MyComponentProps 
 someOfYourOwnProps: any;
 history: History;
 someMorePropsIfNeedIt: any;

luego en su componente si es una clase do

class MyComponent extends Component 

si es funcional

const MyComponent = (props: MyComponentProps) => 

donde definiste history ¿aquí? hay un mundial window.history que es un estándar web. Si desea utilizar el historial del enrutador de reacción, se pasa como accesorio. Tratar props.history.push() en cambio.

El componente debe recibir la history accesorio del enrutador de reacción. Así que debería ser un hijo directo de un Route componente, por ejemplo, o debe transmitir accesorios a través de sus padres.

En React 16 y superior, puede usar Redirigir desde ‘react-router-dom’. En su caso, obtendrá los mismos resultados si usa la redirección en lugar del historial.

import   Redirect  from 'react-router-dom' 

Defina el estado en su componente

this.state = 
  loginStatus:true

que en tu método de renderizado

render () 
if(this.state.loginStatus)
    return 
 
return(
 
 Please Login 
 )

Editar: usando this.props.history

Hay dos cosas que encontré que faltan en su código. Uno es el enlace de su método de inicio de sesión. Enlace su método para que pueda obtener acceso a this de clase. Otras cosas es uso withRouter HOC. withRouter le dará acceso a la propiedad this.history. Así a continuación.

import React from "react";
import  withRouter  from "react-router";

class MainClass extends Component {
  constructor(props) 
      this.login = this.login.bind(this)
   

  logIn()
      this.props.history.push('/new-location')
   

   render()
     return (
       

          Pieteikties
      
      )  
    

 export default withRouter(MainClass);

valoraciones y reseñas

Si te ha sido provechoso nuestro post, sería de mucha ayuda si lo compartieras con más seniors de esta manera contrubuyes a dar difusión a nuestra información.

---

---

Utiliza Nuestro Buscador