Migration Guide from v6 to v7

We changed the package name from @refinedev/react-router-v6 to @refinedev/react-router for consistency and to avoid confusion. Also react-router-dom is replaced with react-router in version 7.

First, we need to uninstall old packages.

npm uninstall @refinedev/react-router-v6 react-router-dom react-router

Then, we need to install the new packages.

Note that react-router-dom is no longer needed, all react-router v7 components are imported from react-router package.

npm install @refinedev/react-router react-router

- "@refinedev/react-router-v6": "^4.6.0"
+ "@refinedev/react-router": "^5.0.0"

- "react-router-dom": "^6.8.1"
- "react-router": "^6.8.1"
+ "react-router": "^7.0.2"

Then is all set! You can start using @refinedev/react-router with react-router v7.

Package imports are changed as follows:

 import routerProvider, { NavigateToResource, UnsavedChangesNotifier, DocumentTitleHandler }
- from "@refinedev/react-router-v6";
 import routerProvider, { NavigateToResource, UnsavedChangesNotifier, DocumentTitleHandler }
+ from "@refinedev/react-router";

-import { RouterProvider } from "react-router-dom";
+import { RouterProvider } from "react-router";

Instead of manually updating the imports, you can use the refine-codemod to automatically update the imports in your project. Make sure your git working tree is clean though so you can revert if it doesn't work as expected.

For @refinedev/react-router-v6 to @refinedev/react-router:

npx @refinedev/codemod@latest refine-react-router-v6-to-refine-react-router

For react-router-dom to react-router:

npx @refinedev/codemod@latest react-router-dom-to-react-router"