Question

react-router：类型中缺少“history”

2018-09-27

7374

reactjs typescript react-router-dom

App.tsx部分代码：

interface AppProps{
  history: any
}

export default class App extends React.Component<AppProps,...> {

  public state = {
    target: this.props.history.push('/')
  };

  private route() {
    if (!session.isLogin) {
        this.setState({ target: this.props.history.push('/') });
        return
    } else {
        this.setState({ target: this.props.history.push('/root') })
    }
  }
  ...
  public render() {
    return this.state.target
  }
}

index.tsx部分代码

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

为什么history类型错误？提示：类型'{}'中缺少属性'history'。在index.tsx中应该传递什么参数？

谢谢！

Answer 1

如果您希望 App 从 MemoryRouter 接收所有 RouteComponentProps （包括 history 对象），那么您需要通过路由调用 App ，如下所示：

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

然后您可以在 App 的声明中将 AppProps 替换为 RouteComponentProps<{}> 。