Question

index.tsx的一些代码：

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

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

写这篇文章时，我会报告错误。无法读取未定义的属性“ push”，然后我修改了“ withRouter”的用法来对其进行修改。

export default withRouter(App)

也报错：错误TS2345：无法将类型为“ typeof App”的参数分配给类型为“ ComponentType>”的参数。

类型'app的类型'不能分配给类型'StatelessComponent>'。

类型为'typeof App'的签名'（props：RouteComponentProps＆{children ?: ReactNode;}，context ?: any）的签名不匹配：ReactElement |空”。

出什么问题了？

谢谢

Answer 1

您在props中的App.tsx需要从RouteComponentProps扩展react-router

例如：

interface AppProps extends RouteComponentProps {
    // rest of props
}

您应该可以使用：

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

react-router无法读取未定义的属性“ push”？

1 个答案: