React with Typescript: Property 'push' does not exist on type 'History'

Question

I'm trying to navigate away from a view by pushing into the history object. However when I try to push a route into it, I get an error message:

Property 'push' does not exist on type 'History'.

render(){
  return (
    <div className="loginWrapper">
      withRouter(({history}) => (<button onClick={()=>{history.push('/home')}} className="btn btn-primary">Pieteikties</button>))
    </div>
  )  
}

What can I do to fix this?

EDIT:

I also tried this:

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

with a component like this:

render(){
  return (
    <div className="loginWrapper">
      <button onClick={this.logIn} className="btn btn-primary">Pieteikties</button>
    </div>
  )  
}

And it didn't work.

Answer 1

Where did you define history here? There is a global window.history which is a web standard. If you want to use the react-router history, it's passed as a prop. Try props.history.push() instead.

The component must receive the history prop from react router. So it should be a direct child of a Route component, for example, or you must pass down props via its parents.

Answer 2

UPDATE: I found a new way to do this type of thing. Same as b4 you need to install them types:

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<MyComponentProps, MyComponentState> {

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

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

    public onClickHandler (evt: React.MouseEvent<HTMLButtonElement, MouseEvent>): void {
        evt.preventDefault();
    }

    public componentDidMount () {
        this.props.history;
    }
   public render (): React.ReactElement<MyComponentProps> {
        return (
            <div>trol</div>
        )
    }
}

---

hihitl i know whats happening. Hope you sill need it.

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<LocationState>;
 someMorePropsIfNeedIt: any;
}

then on your component if it is a class do

class MyComponent extends Component<MyComponentProps, {}> {}

if it is a functional

const MyComponent = (props: MyComponentProps) => {}

Answer 3

In React 16 and above you can use Redirect from 'react-router-dom'. In your case you will get same outcomes if you use redirect instead history.

import  { Redirect } from 'react-router-dom' 

Define state in your component

this.state = {
  loginStatus:true
}

than in your render method

render () {
if(this.state.loginStatus){
    return <Redirect to='/home'  />
 }
return(
 <div> Please Login </div>
 )
}

Edit: using this.props.history

There are two things I found missing in your code. One is your login method binding. Bind your method so that you can get access to this of class. Other things is use withRouter HOC. withRouter will give you access to the this.history prop. Like so below.

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 (
       <div className="loginWrapper">
          <button onClick={this.logIn} className="btn btn- 
          primary">Pieteikties</button>
      </div>
      )  
    }

 export default withRouter(MainClass);