Adding routerProvider to Refine v4 errors with useLocation being used outside of a router

I am trying to upgrade my project to v4 and I've been having lots of issues. Right now trying to use the new router immediately fails if I try to add the routerProvider to the Refine component I have imported the routerProvider from @refinedev/react-router-v6 and BrowserRouter from 'react-router-dom' I don't understand why its not working
No description
17 Replies
kapa.ai
kapa.ai2y ago
Hey @rafaelsorto! I'm the kapa.ai support bot. I've searched through the docs to try to answer your question. :wave:
kapa.ai
kapa.ai2y ago
---------------------- It seems like you might be missing the proper wrapping of the <Refine> component with the <BrowserRouter> component. To fix the issue, make sure you wrap the <Refine> component with <BrowserRouter> and pass the routerProvider prop to the <Refine> component. Here's an example of how to do it:
import { Refine } from "@refinedev/core";
import routerProvider from "@refinedev/react-router-v6";
import { BrowserRouter } from "react-router-dom";

const App = () => {
return (
<BrowserRouter>
<Refine
routerProvider={routerProvider}
// ... other props
>
{/* ... */}
</Refine>
</BrowserRouter>
);
};
import { Refine } from "@refinedev/core";
import routerProvider from "@refinedev/react-router-v6";
import { BrowserRouter } from "react-router-dom";

const App = () => {
return (
<BrowserRouter>
<Refine
routerProvider={routerProvider}
// ... other props
>
{/* ... */}
</Refine>
</BrowserRouter>
);
};
Please ensure that your code follows this structure. If you still encounter issues, you can refer to the React Router v6 documentation (https://refine.dev/docs/packages/documentation/routers/react-router-v6) for more information and examples. ----------------------
React Router v6 | refine
refine provides router bindings and utilities for React Router v6. It is built on top of the react-router-dom package. This package will provide easy integration between refine and react-router-dom for both existing projects and new projects.
kapa.ai
kapa.ai2y ago
<@675886119006634036> kapa.ai is still learning and improving, please let us how it did by reacting below
national-gold
national-gold2y ago
Do you have still components on resource ? Can you share app.tsx with us
absent-sapphire
absent-sapphire2y ago
I am starting to think that the issue is because i'm using a monorepo and somehow I see that react-router-dom also gets added directly to the node-modules inside @refinedev/react-router-v6 Attached app.tsx
sunny-green
sunny-green2y ago
Do you have any use of useLocation in your code? Including the ones from refine’s react-router-v6/legacy
absent-sapphire
absent-sapphire2y ago
no, the problem goes away once I remove the routerProvider, its the call inside the bindings go function that triggers the error
sunny-green
sunny-green2y ago
Can you also share the version of react-router-dom 🙏 i would love to investigate further for a solution
absent-sapphire
absent-sapphire2y ago
I also installed react-router-dom 6.8.1 because I noticed that one is in the package.json of @refinedev/react-router-v6 Using turbo repo with a bit of a shared setup for a Admin portal and a Staff portal so turbo repo takes care of the packge management for every workspace the tutorial example works out of the box so I think its something related to the setup I installed the tutorial just to try to compare my App.tsx file with th tutorial one
sunny-green
sunny-green2y ago
Kinda a shot in the dark but can it be related to notificationprovider not being under browserrouter?
absent-sapphire
absent-sapphire2y ago
I tried moving BrowserRouter to the top of this file , and when it didn't work I moved it to the main.tsx file which is the one with only the React Dom stuff on it but those 2 things didn't solve the issue
sunny-green
sunny-green2y ago
Thank you for the clarification. I will try to reproduce using a similar setup with turborepo. Just like you said, probably an issue about multiple instances of react router dom 🧐
absent-sapphire
absent-sapphire2y ago
@aliemirs I started updating one of the apps in the monorepo trying to get one upgraded first before proceeding to the other ones. I just manually went to the other 3 apps and added react-router-dom to make sure a turborepo had a single react-router-dom and that has fixed the issue thank you for your time and help
sunny-green
sunny-green2y ago
Great to hear that!
absent-sapphire
absent-sapphire2y ago
I think not having specific react-router-dom in the other apps was allowing the react-router-dom inside react-router-v6 to get installed instead of epending on just a single install
flat-fuchsia
flat-fuchsia2y ago
@aliemirs I had the same issue - useLocation error when using the routerProvider. I don't have a big monorepo, but I did have an older version of react-router-dom pinned in my project (v6.3). Upgrading that version to v6.9 fixed my issue as well (thanks @rafaelsorto for figuring it out).
foreign-sapphire
foreign-sapphire2y ago
i am having this same issue i am kind of confused, under my node modules when I migrated the react-router-v6 that is installed has its own version of react-router-dom. So do we still have to install another version ? ignore it I was able to solve this