• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
    • Questions
    • Teachers
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

245
Views
Reaccionar enrutador dom v6 usando useNevigation no funciona con redux

Actualicé REACT ROUTER DOM A V6 desde V5. Uso REDUX y tengo una función general llamada CAMBIAR RUTA dentro de COMMON.ACTION Hasta ahora usé HISTORY.PUSH y después de la actualización, necesito cambiarlo para USAR NAVEGAR pero cada cuando lo cambio me sale el siguiente error

Error: llamada de gancho no válida. Los ganchos solo se pueden llamar dentro del cuerpo de un componente de función. Esto podría suceder por una de las siguientes razones:

  1. Es posible que tenga versiones que no coincidan de React y el renderizador (como React DOM)
  2. Podrías estar rompiendo las Reglas de los Hooks
  3. Es posible que tenga más de una copia de React en la misma aplicación

ahora sé que rompo las reglas de los ganchos, pero no sé por qué, como changeRoute es una función, ¿qué estoy haciendo mal?

Gracias por tu ayuda

esta es mi aplicación que utilizó el componente de navegación:

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

esto es Navegación.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;

esta es mi función chagnRoute en common.action:

 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 }); };

así es como lo usé en otros componentes:

 dispatch(changeRoute("/blabla"))

antes de la actualización al enrutador dom v6 funciona así en commom.action y todo funciona bien:

 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 }); };
almost 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

Su changeRoute es una función javascript, no un componente de la función React

Las reglas de los ganchos dicen: Solo llame a ganchos desde funciones React . No llame a ganchos desde funciones regulares de JavaScript.

Esto significa que no puede llamar a useNavigate dentro changeRoute

En su lugar, puede pasar nav a changeRoute como un parámetro como este

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

Pero debe asegurarse de llamar a este envío solo dentro de los componentes de la función React

almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error