How to useFetcher in v7?

[Eldevia]

Hi, if i use V7 Framework. Do i need to use browserrouter or is there better way?

[Eldevia]

i use fetcher in context to fetch csrf and like login/auth stuff

[sergiodxa]

If you use library mode you need to use createBrowserRouter and not BrowserRouter

[Eldevia]

i migrated from remix, i wanna use as framework

[sergiodxa]

Then it's the same as in Remix

[Eldevia]

i get error: useFetcher must be used within a data router. See https://reactrouter.com/en/main/routers/picking-a-router.

but this error nowhere documented in the v7 docs even the link is invalid!

[sergiodxa]

Are you using React Router v7 Framework mode? It's hard to tell without seeing any actual code, but you could create a new React Router app using the CLI and add a fetcher there to see it works, then compare that with your app.

Ensure the component using useFetcher is inside your RR app (inside routes) and not outside, if you have something like:

import { StrictMode, startTransition } from "react";
import { hydrateRoot } from "react-dom/client";
import { HydratedRouter } from "react-router/dom";

startTransition(() => {
  hydrateRoot(
    document,
    <StrictMode>
      <SomeProvider>
        <HydratedRouter />
      </SomeProvider>
    </StrictMode>,
  );
});

The SomeProvider component and any component rendered inside it will be outside your router, and in that case it won't be able to use useFetcher or any other RR feature.