reactjs - 在类组件中使用 TypeScript 和 Redux 进行编程式 React Router 导航

Question

我总共花了大约 3 个小时寻找关于如何在已经连接到 Redux 的 Typescript React 类组件中以编程方式使用 React Router 导航的正确答案。它都不起作用，Typescript 给出了各种类型的错误。

我确实只找到了部分解决方案，所以我正在创建这个线程并回答它以供有类似问题但仍然无法找到答案的人将来使用。

非常感谢：

• Sahan在这里用Router、connect() 和 react-compose回答
• Henrik 在这里的回答Programmatically navigating：React Router V4+ Typescript give error

标签： reactjstypescriptreact-routernavigation

Answer 1

以下是所有重要的核心部分，它们允许您使用 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));