react-router Cannot read property 'push' of undefined?

Question

some code of index.tsx:

ReactDOM.render(
<MemoryRouter>
    <LocaleProvider locale={zhCn}>
        <App/>
    </LocaleProvider>
</MemoryRouter>,
document.getElementById('root') as HTMLElement
);

some code of App.tsx

interface AppProps{
  history?: any
}
....
public route() {
    if (!session.isLogin) {
        this.props.history.push('/');
    } else {
        this.props.history.push('/root')
    }
}
...
public render() {
    return (
        <Switch>
            <Route exact path='/' component={Login} />
            <Route exact path='/root' component={Root} />
        </Switch>
    )
}

When I write this, I will report wrong.Cannot read property 'push' of undefined，Then I modified the use of "withRouter" to modify it.

export default withRouter(App)

Also reported wrong： error TS2345: Argument of type 'typeof App' is not assignable to parameter of type 'ComponentType>'.

Type 'typeof App' is not assignable to type 'StatelessComponent>'.

Type 'typeof App' provides no match for the signature '(props: RouteComponentProps & { children?: ReactNode; }, context?: any): ReactElement | null'.

What is the problem?

Thank you

Hayden Hall Hayden Hall · Accepted Answer · 2018-09-27T09:00:56

Your props in App.tsx needs to extend RouteComponentProps from react-router

for example:

interface AppProps extends RouteComponentProps {
    // rest of props
}

You should then be able to use:

this.props.history.push("/your-route");

react-router Cannot read property 'push' of undefined?

1 Answers