我正在使用 React 和 Typescript,并且需要使用历史记录,因为我需要有 RouteComponentProps 接口(interface)
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 接口(interface)作为 RouteComponentProps 时,它在下面的代码中给出错误。
class App extends Component {
render() {
return (
<Provider>
<React.Fragment>
<Navbar />
<Routes />
</React.Fragment>
</Provider>
);
}
}
当我尝试使用我的路线组件时出现错误。错误提示
类型“{}”缺少类型“Readonly>”中的以下属性:历史记录、位置、匹配 TS2739
请帮忙解决这个问题
最佳答案
您必须将这些 Prop 传递给您的组件。
ofc 你不想在应用程序组件中传递它。只需用 hoc 包裹它即可来自 react 路由器库)
高阶组件“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);
关于reactjs - React 使用 RouteComponentProps - 类型 '{}' 缺少类型“Readonly<RouteComponentProps<{}”中的以下属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56002251/