RouteComponentProps 与 useHistory

使用React功能组件和Typescript，使用useHistory钩子与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();
};

我和你的情况完全一样，我想和你分享我的结论。

首先，两种方法的程序化导航的行为是相同的，因为它们都使用相同的history https://reactrouter.com/web/api/history实例，但使用方式上有一些区别：

• 使用会员history of RouteComponentProps迫使您使用 props 将其一直钻到组件树中。这种方法没有任何问题，但是如果你的组件树不断增长，你可能会发现自己钻了很多层组件。

• Using useHistory钩子可以避免之前的道具钻孔，只允许您使用history任何功能组件中的实例。注意这个钩子是未来钩子的快速权宜之计 https://reacttraining.com/blog/react-router-v5-1/#usehistory并最终将被取代useNavigate hook.

就我个人而言，我发现useHistory为长组件树挂钩一个更干净、更可读的解决方案，但我继续使用history的实例RouteComponentProps如果该组件是接近的或直接子组件Route成分。