useLocation in v4
I'm using
but got Uncaught Error: useLocation() may be used only in the context of a <Router> component.
32 Replies
Hi @ganuzaz. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
It seems like you're trying to use the
useLocation
hook outside of a router context. To fix this issue, make sure you're using the useLocation
hook within a component that is wrapped by a router provider.
In refine, you can use the useRouterContext
hook to access the router context. Here's an example of how to use it:
Also, ensure that you have properly set up the router provider in your App.tsx
or similar file. For example, if you're using React Router v6:
For more information on setting up router providers in refine, refer to the router provider documentation (https://refine.dev/docs/api-reference/core/providers/router-provider).
----------------------
Note: you can ask me a follow up question by @ mentioning me again
:speech_balloon:
----------------------<@149140198213550080> kapa.ai is still learning and improving, please let us how it did by reacting below
blank-aquamarine•2y ago
Hi, bot is right. are u using useLocation inside <BrowserRouter> ?
optimistic-goldOP•2y ago
yes
i think its just the wrong import
im trying it rn
blank-aquamarine•2y ago
import { useLocation } from 'react-router-dom';
is this import cause error ?
optimistic-goldOP•2y ago
yes it was that
then i changed it into
import { useRouterContext } from "@refinedev/core";
const {useLocation} = useRouterContext()
const location = useLocation()
still same error
my App.tsx is basically like this
I might miss something tho because im migrating from v3
blank-aquamarine•2y ago
In which component are you using useLocation?
optimistic-goldOP•2y ago
create component
const ConfigurationCreate: React.FC = () => {}
blank-aquamarine•2y ago
is ConfigurationCreate inside resource ?
or, as a child of <BrowserRouter> ?
optimistic-goldOP•2y ago
inside the ...configuration
blank-aquamarine•2y ago
oh ok
optimistic-goldOP•2y ago
configuration is is an array of resources
{
name: "config/area",
meta: {
label: "Configuration,
route: "config/area",
parent : "config",
icon: <IoTimerOutline/>,
},
create: ConfigurationCreate
},
blank-aquamarine•2y ago
i try to reproduce the problem but couldn't yet
optimistic-goldOP•2y ago
kind of like that
hmm
and the parent is like this
even if i removed the resources props in the Refine element, the error still popping out
could there be something im missing from package.json or vite stuffs?
blank-aquamarine•2y ago
maybe. it's a long shot but you can remove package.lock.json and node_modules and try to install again
optimistic-goldOP•2y ago
alright
hmm still doesnt work
optimistic-goldOP•2y ago
my package.json
blank-aquamarine•2y ago
i try to reproduce the problem but couldn't get the error
https://codesandbox.io/s/kind-fermat-w2f2nx?file=/src/App.tsx
did i miss something based on your codes ?
if you are able the reproduce the problem based on this app. i will happy to debug
optimistic-goldOP•2y ago
alr let me see
i tried running this locally, and got the error lol
but in codesandbox its running fine
i used yarn, and trying npm now
could this be related to node version or something?
blank-aquamarine•2y ago
i don't think so 🤔 but i'm using v18.5.0
optimistic-goldOP•2y ago
huh
i used npm and it run fines
it run fine
im gonna try using yarn agian
yeah
it actually
because i ran it using 'yarn install'
optimistic-goldOP•2y ago
here is the yarn.lock file from the codesandbox project @alicanerdurmaz
blank-aquamarine•2y ago
is it works now ?
optimistic-goldOP•2y ago
it works if i use npm install instead of yarn install
if i used yarn install, it produces the same error as my project
blank-aquamarine•2y ago
did you try removing yarn.lock and installinga again ?
optimistic-goldOP•2y ago
yea
i removed package.lock.json and yarn.lock and node_modules used npm install. it works
i tried it again by removing every thing and used yarn install, it resulted in the useLocation error same as my project
blank-aquamarine•2y ago
i don't know that causes this problem 🤔 we will look into it
optimistic-goldOP•2y ago
idk if this helps
optimistic-goldOP•2y ago
optimistic-goldOP•2y ago
blank-aquamarine•2y ago
thanks for clear explanation. i will inform you when we found the problem
optimistic-goldOP•2y ago
yarn version 1.22.19
ok
thanks!
just want to confirm that using "npm install --legacy-peer-deps" works on my project