reactjs - RouteComponentProps 与 useHistory

Question

使用 React 功能组件和 Typescript，使用 useHistory hook 和 RouteComponentProps (react router 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 实例 ，但在使用方式上有一些不同:

使用成员(member) history的 RouteComponentProps强制您使用 props 将它一直钻到组件树中。这种方法没有任何问题，但是如果您的组件树不断增长，您可能会发现自己钻研了许多组件层。

使用 useHistory钩子(Hook)可以避免之前的 Prop 钻孔，只允许您使用history任何功能组件中的实例。请注意 this hook is a quick stopgap for a future hook并将最终被 useNavigate 取代钩。

我个人认为 useHistory为长组件树 Hook 一个更清晰、更易读的解决方案，但我一直在使用 history RouteComponentProps 的实例如果组件是接近的或者是 Route 的直接子代成分。