如何在处理程序文件中导入 useNavigate？

Question

我有一个包含所有功能的单独文件，但是当我尝试导入库react-router-dom并使用useNavigate时，我收到如下错误

未捕获的类型错误：无法读取 null 的属性（读取“useContext”）

或

未捕获（承诺中）错误：缩小的 React 错误 #321；

代码：

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

const navigate = useNavigate();

const onSubmit = async () => {
  navigate('/success');
};

export default {onSubmit};

我尝试在函数内声明变量，但出现错误

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

    const onSubmit = async () => {

     const navigate = useNavigate();

      navigate('/success');
    };

Answer 1

您不能在组件外部使用钩子。 https://reactjs.org/docs/hooks-rules.html

相反，您可以创建

useOnSubmit

钩子，然后如果需要，可以在组件主体中使用它

const useOnSubmit = (cb = () => {}) => {
   const navigate = useNavigate(); 

   const onSubmit = async () => {
      await cb();
      navigate('/success');
   }
   
   return onSubmit;
}

现在你可以像下面这样使用这个钩子了

const SampleComponent = () => {
   const onSubmit = useOnSubmit(() => {
      // do submit logic here
   });

   return <button onClick={onSubmit}>Submit</button>
}