使用useNeviation的React路由器dom v6不适用于redux

Question

我将REACT ROUTER DOM从V5升级到V6我使用REDUX，并且在COMMON.ACTION中有一个名为CHANGE ROUTE的通用函数到目前为止，我使用了HISTORY.PUSH，更新后，我需要将其更改为USE NAVIGATE，但每次更改时，我都会收到以下错误

错误：无效的挂钩调用。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一：

1. React和渲染器的版本可能不匹配(例如React DOM(
2. 你可能违反了胡克规则
3. 同一应用程序中可能有多个React副本

现在我知道我违反了hook规则，但我不知道为什么changeRoute是一个函数我做错了什么？

感谢您的帮助

这是我的应用程序，使用了导航组件：

return (
<Site onClick={(e) => handleClick(e)}>
<Navigation />
<SnackbarContentWrapper/>
<AppLevelComponents/>
</Site>
);

这是Navigation.js:

const Login = lazy(() => import("../../pages/login/Login"));
const Navigation = () => {
const fallback = <WithFullScreenLayout><Loader/></WithFullScreenLayout>;
return (
<Suspense fallback={fallback}>
<Routes>
<Route  path="/login" element={<Login />}/>
</Routes>
</Suspense>
)
};
export default Navigation;

这是我常用的chagnRoute函数。操作：

export const changeRoute = (route) => (dispatch) => {
const nav = useNavigate();
commonService.changeRoute(`${window.location.pathname}${window.location.search}`);
if (route !== '' && route !== '/') { // to prevent looping
nav(route);
}
dispatch({
type: CHANGE_ROUTE,
payload: route
});
};

这就是我在其他组件中使用它的方式：

dispatch(changeRoute("/blabla"))

在升级到路由器dom v6之前，它在commom.action和evreything中的工作方式如下：

export const changeRoute = (route) => (dispatch) => {
const nav = useNavigate();
commonService.changeRoute(`${window.location.pathname}${window.location.search}`);
if (route !== '' && route !== '/') { // to prevent looping
history.push(route);
}
dispatch({
type: CHANGE_ROUTE,
payload: route
});
};

Answer 1

您的changeRoute是一个javascript函数，而不是React函数组件

钩子的规则是：只从React函数调用钩子不从常规JavaScript函数调用钩子。

这意味着您不能在changeRoute中调用useNavigate

相反，您可以将nav传递给changeRoute，作为类似的参数

dispatch(changeRoute("/blabla", useNavigation()))

但你必须确保只在React功能组件内部调用此调度