Question

=“”

我正在使用React打字稿，需要使用历史记录，我需要具有RouteComponentProps

的接口

export default class Routes extends Component<RouteComponentProps, any> {
  render() {
   return (
    <div>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route exact path="/login" component={Login} />
        <ProtectedRoute exact path="/admin" component={Admin} />
      </Switch>
    </div>
  );
 }}

当我将props接口用作RouteComponentProps时，它在以下代码中给我错误。

class App extends Component {
  render() {
   return (
     <Provider>
       <React.Fragment>
         <Navbar />
         <Routes />
       </React.Fragment>
     </Provider>
 );
}
}

当我尝试使用“路线组件”时出现错误。错误提示

类型“ {}”缺少类型“只读”的以下属性：历史记录，位置，匹配TS2739

请帮助解决此问题

Answer 1

您必须将这些道具传递给组件。

ofc，您不想在App组件中传递它。只需用react-router lib中的hoc包装它即可

高阶组件“ withRouter”将完成工作

import { RouteComponentProps, withRouter } from 'react-router';    
class Routes extends React.Component<RouteComponentProps, any> {

  public render() {
    return (
      <div>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route exact path="/login" component={Login} />
          <ProtectedRoute exact path="/admin" component={Admin} />
        </Switch>
      </div>
    );
  }
}

export default withRouter(Routes);

React使用RouteComponentProps-类型“ {}”缺少类型“ Readonly <routecomponentprops <{}

1 个答案: