每个组件的 useHistory 默认值

Posted 2023-02-22

【中文标题】每个组件的 useHistory 默认值

【英文标题】：useHistory default for every components

【发布时间】：2021-11-23 13:24:55

【问题描述】：

为什么我们需要一遍又一遍地在每个组件中执行此操作以使用历史记录来导航我们的应用程序？

import  useHistory  from "react-router-dom";

function HomeButton() 
  let history = useHistory();

  function handleClick() 
    history.push("/home");
  

  return (
    <button type="button" onClick=handleClick>
      Go home
    </button>
  );

我希望访问每个组件中的历史对象。

【问题讨论】：

如果你把它作为属性传递给其他组件是不是不行？

@ShamarYarde 但至少我不必每次都写 useHistory。我的应用有成百上千个无状态组件

您可以通过编写自定义钩子来缩短它吗？

【参考方案1】：

我认为你可以使用自定义钩子来减少代码。

import  useHistory  from "react-router-dom";

const useHomeClickHandle = () => 
  let history = useHistory();

  // you should use useCallback here to avoid rerender
  function handleClick() 
    history.push("/home");
  

  return handleClick


function HomeButton() 
  const handleClick = useHomeHandleClick()
  return (
    <button type="button" onClick=handleClick>
      Go home
    </button>
  );


// OR
function HomeButton() 
  // if you don't have any conditional control here
  return (
    <button type="button" onClick=useHomeHandleClick()>
      Go home
    </button>
  );

【讨论】：

不，这不是我的问题。所以你有50个组件，你在那些需要使用历史的组件中声明useHistory吗？你不觉得它很重复

你担心性能吗？如果是这样，请忽略您的感觉，因为所有 useHistory 都使用 react-router 正在使用的上下文，并且团队已经处理了它的性能。

所以没有办法避免这种乏味的重复？

我喜欢之前的解决方案 withRouter，我们将整个历史对象与 redux 一起传递，我没有看到任何性能问题。

据我了解，您需要将 withRouter 与您想要的组件一起使用。您仍然需要重复，它更短，但它会在高阶组件内创建一个包装器组件。您仍然可以根据需要使用它。高阶组件也是一个很好的模式，我也混合了两种方式。只需让代码让您和您的团队感到舒适。 ?

【参考方案2】：

如果您只需要导航到一个页面，您可以尝试使用以下参考指南中的第一个示例：基本路由部分。设置好之后，你可以重写 HomeButton 函数如下：

import  Link  from "react-router-dom";

function HomeButton() 
    
      return (
        <Link to="/home">
          Go home
        </Link>
      );
    

您可以尝试的另一个解决方案是创建一个自定义按钮组件，该组件根据传递的属性更改功能。您可以尝试类似以下的方法：

CustomButton.js

import  useHistory  from "react-router-dom";

function CustomButton() 
  let history = useHistory();

  function handleNavigation() 
    history.push(props.location);
  

  function handleClick() 
    console.log("This function used to handle navigation to the home page.");
  

  if (props.navigation) 
   return (
    <button type="button" onClick=handleNavigation>
      Go home
    </button>
   );
   else 
    <button type="button onClick=handleClick>
      Click
    </button>
  

AnyOtherComponent.js

import CustomButton from "./CustomButton.js"

function AnyOtherComponent() 
 return (
  <div>
   <CustomButton navigation location="/home" />
   <CustomButton navigation=false />
  </div>
 )

参考资料：

第一个示例：基本路由。反应训练 / 反应路由器。 https://reactrouter.com/web/guides/quick-start。 （2021 年 10 月 1 日访问）。

【讨论】：

我不是在问如何使用 lib，我是在问如何避免在每个组件中使用 useHistory

@Fay Chen，我得考虑一下。您将不得不告诉您的应用程序何时导航，所以我能想到的唯一解决方案需要每次调用某种导航代码。

@FayChen，我更新了我的答案，其中包含有关第二个解决方案的更多详细信息。