R
Refine

ask-any-question

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

Oother-emerald3/23/2023
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
Kkapa.ai3/23/2023
Hey @rafaelsorto! I'm the kapa.ai support bot. I've searched through the docs to try to answer your question. :wave:
Kkapa.ai3/23/2023
---------------------- 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.
Kkapa.ai3/23/2023
<@675886119006634036> kapa.ai is still learning and improving, please let us how it did by reacting below
Ddeep-jade3/23/2023
Do you have still components on resource ? Can you share app.tsx with us
Oother-emerald3/23/2023
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
Fforeign-sapphire3/23/2023
Do you have any use of useLocation in your code? Including the ones from refine’s react-router-v6/legacy
Oother-emerald3/23/2023
no, the problem goes away once I remove the routerProvider, its the call inside the bindings go function that triggers the error
Fforeign-sapphire3/23/2023
Can you also share the version of react-router-dom 🙏 i would love to investigate further for a solution
Oother-emerald3/23/2023
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
Fforeign-sapphire3/23/2023
Kinda a shot in the dark but can it be related to notificationprovider not being under browserrouter?
Oother-emerald3/23/2023
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
Fforeign-sapphire3/23/2023
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 🧐
Oother-emerald3/23/2023
@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
Fforeign-sapphire3/23/2023
Great to hear that!
Oother-emerald3/23/2023
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
Rrare-sapphire3/24/2023
@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).
Aambitious-aqua6/12/2023
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

Looking for more? Join the community!

R
Refine

ask-any-question

Join Server
Recommended Posts
Add Refine to an existing React project?I'm wondering what the best way is to add Refine to an existing project. I tried adding the CLI, How to use Refine with JavascriptHello, What do I have to do to setup Refine to use JavaScript instead of typescript? I have checked Display success toast notificationI have created auth provider and i implemented login functionality .when I login it display toast uHow can I customize useRegister onSuccess error toast notification message?This is the refine V4 source code for useRegister hook. There is error handling, which by default thSupabase Set role upon signup or signInWithOAuthHi again everyone, How to set claim for role in Supabase when user signup with email and password orResource in useCustomMutation successNotification parameterHow do I access or pass a resource name into useCustomMutation? I use this hook to have a reorderingUse more than one Supabase Table on one PageHey lovely Refine Team, I cant find how to use Data of two Supabase Tables on one Page.how to adding custom type in option(queryOptions) select useCustom ?my use case is to overrides data from api via select options(queryOptions) but i dont know how to aTSconfig errorHey Everyone - I was wondering if anyone else was running into these errors as they were starting a I can't connect my client id as it is asking for a string instead of client_id: process.env.REACT_API can't connect my client id as it is asking for a string instead of client_id: process.env.REACT_API'm trying to create a projectHello everyone, I'm trying to create a project but it only comes with the header, how do I get the sError after upgrade to v4: Uncaught Error: No QueryClient set, use QueryClientProvider to set oneHello everything is fine? by the stack trace the error is in the method: useIsAuthenticated, I am usMultitenant URLsHi all! Anyone have more info on how to provide props to the nextjs-router in v4? We are multitenanUsing response data in errorNotification useFormHello, My REST API sends a JSON with explanation of what's wrong with the response when request failImplement Google Maps in a FormHello everyone, I am having trouble implementing google maps in a form where the user should fill soCannot invoke an object which is possibly 'undefined'Hi everyone, can anyone help me with this? I trying to integrate Access Control with Supabase and whhow to prefetch data using refineprefetch data before showing itemCan't change title of AuthPageI tried to change my login page title like this: <AuthPage type="login" title={<h2>WelcoUse modal form to populate an array in the current recordHello all, I need some help here. I'm trying to implement modal form in a project I'm working on witDefine customized Logo on default LoginpageHi, how can i set a logo on default Loginpage. (I am using refine V4)