我正在使用 React 和 Typescript,并且需要使用历史记录,因为我需要有 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>
);
}
}
当我尝试使用我的路线组件时出现错误。错误说
类型“{}”缺少类型“Readonly>”中的以下属性:历史记录、位置、匹配 TS2739
请帮助解决这个问题
您必须将这些道具传递给您的组件。
ofc 你不想在应用程序组件中传递它。只需将其包裹起来hoc https://reactjs.org/docs/higher-order-components.html来自反应路由器库)
高阶组件“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);
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)