如何解决在类组件中使用TypeScript和Redux进行程序化React Router导航
我总共花了3个小时来寻找正确的答案,以了解如何在Typescript已连接到Redux的React类组件中使用React Router进行编程导航。没有一个起作用,Typescript给出了各种各样的类型错误。
我确实只找到了部分解决方案,所以我创建了这个线程并为有类似问题但仍无法找到答案的人回答该问题以供将来使用。
非常感谢:
- Sahan在这里的回答withRouter,connect() and react-compose
- Henrik在这里的回答Programmatically navigating : React Router V4+ Typescript giving error
解决方法
下面是所有重要的核心部分,可让您使用Typescript在类组件内部连接React Router,Redux。希望对您有所帮助。
import { withRouter,RouteComponentProps } from "react-router-dom";
import { connect,ConnectedProps } from "react-redux";
import { RootState } from "../reducers/rootReducer"; // your custom file
const mapStateToProps = (state: RootState) => {return {...}}; // RootState is your main state from Redux
const mapDispatchToProps = (dispatch) => {return{...}};
const connector = connect(mapStateToProps,mapDispatchToProps);
type PropsFromRedux = ConnectedProps<typeof connector>;
type MyProps = PropsFromRedux & RouteComponentProps & {...}; // Custom props goes here
class YourReactClassComponent extends Component<MyProps,MyState> {...}
export default withRouter(connector(YourReactClassComponent));
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。