Question

使用React功能组件和Typescript，使用useHistory钩子与RouteComponentProps（反应路由器v5.1）之间有什么区别吗？

使用RouteComponentProps的示例：

import { RouteComponentProps } from 'react-router-dom';

interface PropsType extends RouteComponentProps {
    text: string;
}

const MyFunctionalComponent = ({
    text,
    history
    }: PropsType) => {

};

使用useHistory的示例：

import { useHistory } from 'react-router-dom';

interface PropsType {
    text: string;
}
const MyFunctionalComponent = ({
    text
  }: PropsType) => {
    const history = useHistory();
};

Answer 1

我的处境完全相同，我想与您分享我的结论。

首先，这两种方法的程序化导航的行为是相同的，因为它们都使用相同的history实例，但是使用方式有所不同他们：

使用history的成员RouteComponentProps会强制您使用props在组件树中一直进行钻取。这种方法没有错，但是如果您的组件树长大，您可能会发现自己钻穿了许多层组件。
使用useHistory钩子可以避免先前的道具钻探，而仅允许您在任何功能组件中使用history实例。请注意，this hook is a quick stopgap for a future hook和最终将由useNavigate钩替换。

就个人而言，我发现useHistory为长组件树提供了一种更干净，更易读的解决方案，但是如果组件是封闭的或直接的，我会继续使用history的{{1}}实例RouteComponentProps组件的子代。

RouteComponentProps与useHistory

1 个答案: