Refine•3y ago

useLocation in v4

I'm using

const location = useLocation()
const { products, code } = location.state as any

const location = useLocation()
const { products, code } = location.state as any

but got Uncaught Error: useLocation() may be used only in the context of a <Router> component.

kapa.ai•6/15/23, 6:04 AM

Hi @ganuzaz. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base.

kapa.ai•6/15/23, 6:05 AM

----------------------
It seems like you're trying to use the

useLocation

useLocation

hook outside of a router context. To fix this issue, make sure you're using the

useLocation

useLocation

hook within a component that is wrapped by a router provider.

In refine, you can use the 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 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

Note: you can ask me a follow up question by @ mentioning me again

----------------------

kapa.ai•6/15/23, 6:05 AM

@149140198213550080 kapa.ai is still learning and improving, please let us how it did by reacting below

brilliant-lime•6/15/23, 6:06 AM

Hi, bot is right. are u using useLocation inside <BrowserRouter> ?

constitutional-coralOP•6/15/23, 6:07 AM

yes

constitutional-coralOP•6/15/23, 6:07 AM

i think its just the wrong import

constitutional-coralOP•6/15/23, 6:07 AM

im trying it rn

brilliant-lime•6/15/23, 6:09 AM

import { useLocation } from 'react-router-dom';
is this import cause error ?

constitutional-coralOP•6/15/23, 6:11 AM

yes it was that

constitutional-coralOP•6/15/23, 6:11 AM

then i changed it into
import { useRouterContext } from "@refinedev/core";
const {useLocation} = useRouterContext()
const location = useLocation()

constitutional-coralOP•6/15/23, 6:12 AM

still same error

constitutional-coralOP•6/15/23, 6:15 AM

my App.tsx is basically like this

constitutional-coralOP•6/15/23, 6:17 AM

I might miss something tho because im migrating from v3

brilliant-lime•6/15/23, 6:24 AM

In which component are you using useLocation?

constitutional-coralOP•6/15/23, 6:25 AM

create component

constitutional-coralOP•6/15/23, 6:26 AM

const ConfigurationCreate: React.FC = () => {}

brilliant-lime•6/15/23, 6:26 AM

is ConfigurationCreate inside resource ?

brilliant-lime•6/15/23, 6:27 AM

or, as a child of <BrowserRouter> ?

constitutional-coralOP•6/15/23, 6:27 AM

inside the ...configuration

brilliant-lime•6/15/23, 6:27 AM

oh ok

constitutional-coralOP•6/15/23, 6:27 AM

configuration is is an array of resources

constitutional-coralOP•6/15/23, 6:27 AM

{
name: "config/area",
meta: {
label: "Configuration,
route: "config/area",
parent : "config",
icon: <IoTimerOutline/>,
},
create: ConfigurationCreate
},

brilliant-lime•6/15/23, 6:27 AM

i try to reproduce the problem but couldn't yet

constitutional-coralOP•6/15/23, 6:27 AM

kind of like that

constitutional-coralOP•6/15/23, 6:28 AM

hmm

constitutional-coralOP•6/15/23, 6:30 AM

and the parent is like this

constitutional-coralOP•6/15/23, 6:32 AM

even if i removed the resources props in the Refine element, the error still popping out

Bbrilliant-lime i try to reproduce the problem but couldn't yet

constitutional-coralOP•6/15/23, 6:36 AM

could there be something im missing from package.json or vite stuffs?

brilliant-lime•6/15/23, 6:37 AM

maybe. it's a long shot but you can remove package.lock.json and node_modules and try to install again

constitutional-coralOP•6/15/23, 6:37 AM

alright

constitutional-coralOP•6/15/23, 6:46 AM

hmm still doesnt work

constitutional-coralOP•6/15/23, 6:48 AM

my package.json

message.txt2.29KB

brilliant-lime•6/15/23, 6:52 AM

i try to reproduce the problem but couldn't get the error
https://codesandbox.io/s/kind-fermat-w2f2nx?file=/src/App.tsx

brilliant-lime•6/15/23, 6:52 AM

did i miss something based on your codes ?

brilliant-lime•6/15/23, 6:53 AM

if you are able the reproduce the problem based on this app. i will happy to debug

constitutional-coralOP•6/15/23, 7:00 AM

alr let me see

Bbrilliant-lime i try to reproduce the problem but couldn't get the error https://codesandbox.i...

constitutional-coralOP•6/15/23, 7:23 AM

i tried running this locally, and got the error lol

constitutional-coralOP•6/15/23, 7:23 AM

but in codesandbox its running fine

constitutional-coralOP•6/15/23, 7:23 AM

i used yarn, and trying npm now

constitutional-coralOP•6/15/23, 7:23 AM

could this be related to node version or something?

brilliant-lime•6/15/23, 7:25 AM

i don't think so

but i'm using v18.5.0

constitutional-coralOP•6/15/23, 7:27 AM

huh

constitutional-coralOP•6/15/23, 7:27 AM

i used npm and it run fines

constitutional-coralOP•6/15/23, 7:27 AM

it run fine

constitutional-coralOP•6/15/23, 7:27 AM

im gonna try using yarn agian

constitutional-coralOP•6/15/23, 7:31 AM

yeah

constitutional-coralOP•6/15/23, 7:31 AM

it actually

constitutional-coralOP•6/15/23, 7:31 AM

because i ran it using 'yarn install'

constitutional-coralOP•6/15/23, 7:32 AM

here is the yarn.lock file from the codesandbox project @alicanerdurmaz

yarn.lock611.35KB

brilliant-lime•6/15/23, 7:33 AM

is it works now ?