adverse-sapphire•17mo ago

Migration to v4: genetic routes

Hi 👋 So I've started migrating to v4 (🥳). In v3 I had the routerProvider which generated the routes automatically for my resources. Now, looking at the updated docs I see that we need to add BrowserRouter with manually-defined Routes. Is it still possible to have the routes created automatically, instead of manually providing them?

10 Replies

kapa.ai•17mo ago

Hey @YechiamTK! I'm the kapa.ai support bot. I've searched through the docs to try to answer your question. :wave:

kapa.ai•17mo ago

---------------------- Hi! In refine v4, the creation and control of routes are entirely up to the user, and you must manually create routes. The automatic route generation from resources is no longer available as it was in v3. This change provides more flexibility and control over your routes, allowing you to use refine with any React application without constraints. You can pass the routes to actions of your resources, and although there are methods for generating routes from resources, these methods are optional and not recommended for optimal flexibility. They are available under each router if you choose to use them [^1^]. Here's an example of how to manually define routes in v4:

import { BrowserRouter, Route, Routes } from "react-router-dom";
import { Refine } from "@refinedev/core";
import routerBindings from "@refinedev/react-router-v6";

const App = () => {
  return (
    <BrowserRouter>
      <Refine
        routerProvider={routerBindings}
        resources={[
          {
            name: "products",
            list: "/products",
            show: "/products/show/:id",
            create: "/products/create",
            edit: "/products/edit/:id",
          },
        ]}
      >
        <Routes>
          {/* Define your routes here */}
        </Routes>
      </Refine>
    </BrowserRouter>
  );
};

import { BrowserRouter, Route, Routes } from "react-router-dom";
import { Refine } from "@refinedev/core";
import routerBindings from "@refinedev/react-router-v6";

const App = () => {
  return (
    <BrowserRouter>
      <Refine
        routerProvider={routerBindings}
        resources={[
          {
            name: "products",
            list: "/products",
            show: "/products/show/:id",
            create: "/products/create",
            edit: "/products/edit/:id",
          },
        ]}
      >
        <Routes>
          {/* Define your routes here */}
        </Routes>
      </Refine>
    </BrowserRouter>
  );
};

For more information on how to migrate from v3 to v4, you can refer to the migration guide (https://refine.dev/docs/migration-guide/3x-to-4x). ^1^]: [https://refine.dev/docs/migration-guide/router-provider (https://refine.dev/docs/migration-guide/router-provider) ----------------------

Migrating Router Provider from 3.x.x to 4.x.x | refine

Motivation behind the changes

kapa.ai•17mo ago

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

adverse-sapphire•17mo ago

I missed the router provider migration page. I do see there something not quoted in the bot: "Although we provide methods for generating routes from resources..." - which methods? How can I use them? For those of you that remember my use case, I must generate the routes dynamically using the resources..

Omer•17mo ago

Hey @YechiamTK , Could this be what you're looking for? 👀 https://refine.dev/docs/packages/documentation/routers/react-router-v6/#refineroutes-component

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.

adverse-sapphire•17mo ago

Well that just might be that! I'd recommend adding a link for this in the migration page 🙂 Also, I tried using it now and I see that the inferencers don't receive their usual props?

Omer•17mo ago

Actually, this is not the usage we recommend. It causes many restrictive points. It's the opposite of what we're trying to achieve with v4 🙂

adverse-sapphire•17mo ago

I know.. My use case neccesiate this usage though, because I provide a generic tool, without knowing the resources beforehand.

Omer•17mo ago

Can you create a CodeSandbox that we can use to reproduce the issue?

adverse-sapphire•17mo ago

Yeah no problem, I'll create it tomorrow. Note that I'm doing it a bit more complicated than simply providing the routes with the built-in inferencers, because I'm overriding them for some customizations I do. I will first try with the ootb inferencers and see the behavior without my custom code and let you know if it's just my customizations.