如何在React js的函数组件外部使用useHistory()钩子

Question

我在一个单独的js文件中有一个函数，它检查从Api请求接收的状态代码，根据代码的不同，这个函数需要执行一些操作：

function handleResponseCodes(res) {
try {
if (res.status ===200 ) {
return res.json();
} else if (res.status === 404) {
// here I need to redirect to /help
} else if (!res.ok) {
alert("Error")
} else {
if (res.ok) {
return res.data;
}
}
} catch (error) {
console.log(error);
}
}

然后像这样将此函数用于获取请求。(项目将有100多个api请求，因此这种方式使流程易于遵循(。

fetch(url, obj)
.then((res) => handleResponseCodes(res)

如果res.code＝＝＝404，我需要将用户重定向到/help url，问题是当我尝试使用useHistory((钩子时，如下所示：

import {useHistory) from 'react-router-dom'
const history = useHistory()
//and in the function
else if (res.status === 404) {
// here I need to redirect to /help
history.push("/help")

我得到一个错误，说useHistory挂钩必须只在功能组件中使用。是否有React方法将用户重定向/推送至外部功能组件的/help？(基本上来自函数内部(

Answer 1

您也可以使用document.location.href = '/help'

Answer 2

您可以将历史记录作为一个参数进行传递，如

...inside function component
const history = useHistory();
console.log(history)
//call function here
yourFunc(history)

Answer 3

好问题。我们有很多api调用，必须相应地处理这些响应。这里我想提到的是路由和UI(例如ProfilePage组件(之间的密切关系。

根据Hook规则，我们不能在React组件之外使用Hook函数，所以我们必须使用@Zhang和@istar的答案。

但是拆分路由和组件并不是一个好的做法。当然，有些开发人员使用路由配置文件进行路由，但更改url通常是在组件中完成的。我认为路由也是组件的一部分。

所以我想推荐你在组件内部进行路由。请取响应处理函数的结果，并根据其结果进行路由。

Answer 4

由于以前的构建函数，我也遇到了同样的问题。

import { useHistory } from 'react-router-dom';
function ReactComponent () {
const history = useHistory();
// some arrow function inside main react component 
const someHandler = ( response, history ) => {
outsideFunction( response, history );
};
}
export default ReactComponent;

你可以随心所欲，但我把它分成两个功能。

export function outsideFunction ( response, history ) {
if ( response.status === 201 ) {
checkedSubmitTypeHandler( location );
redirectPage(history);        
return true;
}
}
export function redirectPage (history) {
return history.push(`/help`);
}

所以，这是发生的事情，你在任何地方都会得到响应，内部反应主组件，或者你在其他导出的函数中处理。通过react组件内部使用的箭头函数传递参数。

这样做不是最好的做法。你应该创建一个useHistoryHook，它将在你的应用程序中恢复，你可以这样调用它。

//src 内的history.js页面

import { createBrowserHistory } from 'history';
export default createBrowserHistory();

//使用历史推送组件

import React from 'react';
import history from '../../history';
const useHistoryPush = (pathname,onLoadWait = 30) => {
const refContainer = React.useRef(false);
setTimeout(() => {
refContainer.current = true;
}, onLoadWait); 
return (link) => {
if (refContainer.current) {
history.push(link);
}
};
};
export default useHistoryPush;

//页面内的实现

import useHistoryPush from '../use-history-push';
const Reactcomponent = () => {
const push = useHistoryPush();
React.useEffect(() => {
if (successResponse) {
// on some condition you can call it inside useeffect and it will redirect to the url mention inside *push
push(`/help`);
}
}, [successResponse, push]);
}
export default Reactcomponent;