absent-sapphire•2y ago

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

17 Replies

kapa.ai•2y 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•2y 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•2y ago

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

national-gold•2y ago

Do you have still components on resource ? Can you share app.tsx with us

absent-sapphire•2y 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•2y ago

Do you have any use of useLocation in your code? Including the ones from refine’s react-router-v6/legacy

absent-sapphire•2y 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•2y ago

Can you also share the version of react-router-dom 🙏 i would love to investigate further for a solution

absent-sapphire•2y 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•2y ago

Kinda a shot in the dark but can it be related to notificationprovider not being under browserrouter?

absent-sapphire•2y 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•2y 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•2y 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•2y ago

Great to hear that!

absent-sapphire•2y 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•2y 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•2y 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