I have a separate file where I put the commonly used functions in my react project called MyFunctions.js
. In this file, I want to use useLocation
hook to get the current pathname the query string of my current url. but it gives an error
React Hook "useLocation" is called in function "getCurrentURL" that is neither a React function component nor a custom React Hook function.
this is my code: 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;
CodePudding user response:
Wrap useLocation
inside curly braces in the import, like this:
import { useLocation } from "react-router-dom";
I would recommend you to rename getUrl
to useGetURL
to fulfil React's hook conventions.
Additionally, you have to call useLocation
inside a child of <Router />
. You haven't, therefore, you will get another error: useLocation() may be used only in the context of a <Router> component.
I fixed it as follows:
// 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
CodePudding user response:
You cannot use a hook inside a function export a hook instead like this
import {useLocation} from "react-router-dom";
export function useGetUrl() {
const location = useLocation();
return location.pathname location.search;
}
And import this hook inside any component and use it like this
import {useGetUrl} from '[your_filename].js'
const url = useGetUrl()
[NOTE] You cannot call this hook directly inside JSX you have to call it on top of your component first then you can use the url
inside your jsx, in whatever component you are using this hook make sure it is wrapped with <Router></Router>