Tengo un archivo separado donde pongo las funciones de uso común en mi proyecto de reacción llamado MyFunctions.js . En este archivo, quiero usar useLocation para obtener el nombre de ruta actual + la cadena de consulta de mi URL actual. pero da error
React Hook "useLocation" is called in function "getCurrentURL" that is neither a React function component nor a custom React Hook function.este es mi código: codesandbox
// MyFunctions.js import useLocation from "react-router-dom"; export function getUrl() { const location = useLocation(); return location.pathname + location.search; } // App.js import "./styles.css"; import { HashRouter as Router, Route, Routes } from "react-router-dom"; import * as fn from "./MyFunctions"; import Test1 from "./components/Test1"; export default function App() { const a = fn.getUrl(); return ( <Router> <div className="App"> <h1>Hello CodeSandbox: {a}</h1> <Routes> <Route path="/" element={<Test1 />} /> </Routes> </div> </Router> ); } // Test1.js const Test1 = () => { return ( <div> <h1>Lorem Ipsum</h1> </div> ); }; export default Test1;Envuelva useLocation entre llaves en la importación, así:
import { useLocation } from "react-router-dom"; Le recomendaría cambiar el nombre de getUrl a useGetURL para cumplir con las convenciones de enlace de React.
Además, debe llamar a useLocation dentro de un elemento secundario de <Router /> . No lo ha hecho, por lo tanto, obtendrá otro error: useLocation() may be used only in the context of a <Router> component.
Lo arreglé de la siguiente manera:
// App.js import "./styles.css"; import { HashRouter as Router, Route, Routes } from "react-router-dom"; import * as fn from "./MyFunctions"; import Test1 from "./components/Test1"; export default function App() { return ( <Router> <YourNestedComponent /> </Router> ); } function YourNestedComponent() { const a = fn.useGetUrl(); return ( <div className="App"> <h1>Hello CodeSandbox: {a}</h1> <Routes> <Route path="/" element={<Test1 />} /> </Routes> </div> ); } // MyFunctions.js import { useLocation } from "react-router-dom"; export function useGetUrl() { const location = useLocation(); return location.pathname + location.search; }CodeSandbox: https://codesandbox.io/s/stoic-orla-tbnb07
No puede usar un gancho dentro de una función exportar un gancho como este
import {useLocation} from "react-router-dom"; export function useGetUrl() { const location = useLocation(); return location.pathname + location.search; }E importa este gancho dentro de cualquier componente y úsalo así
import {useGetUrl} from '[your_filename].js' const url = useGetUrl() [NOTA] No puede llamar a este gancho directamente dentro de JSX, primero debe llamarlo encima de su componente, luego puede usar la url dentro de su jsx, en cualquier componente que esté usando este gancho, asegúrese de que esté envuelto con <Router></Router>