correct-apricot•4w ago

React Router v7 in Framework mode

Is it possible to use refine with react router SSR? If so, how would one go about it, what to consider? I spent a lot of time trying to migrate my remix app, but it did not end up working.

3 Replies

kapa.ai•4w ago

Hi @tim. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, you can use Refine with React Router v7, but React Router itself does not provide built-in SSR (Server-Side Rendering) capabilities in the same way as frameworks like Next.js or Remix. React Router v7 is a client-side routing library, and while it can be used in SSR setups (such as with frameworks like RSC/React Server Components or custom Node.js servers), you must handle the SSR logic yourself. Using Refine with React Router v7 To use Refine with React Router v7, you should: 1. Install the correct packages:

   npm install @refinedev/react-router react-router

   npm install @refinedev/react-router react-router

2. Set up your routes and wrap your app with <BrowserRouter>:

   import { Refine } from "@refinedev/core";
   import routerProvider from "@refinedev/react-router";
   import { BrowserRouter, Routes, Route, Outlet } from "react-router";

   const App = () => (
     <BrowserRouter>
       <Refine routerProvider={routerProvider}>
         <Routes>
           {/* Your route definitions */}
         </Routes>
       </Refine>
     </BrowserRouter>
   );

   import { Refine } from "@refinedev/core";
   import routerProvider from "@refinedev/react-router";
   import { BrowserRouter, Routes, Route, Outlet } from "react-router";

   const App = () => (
     <BrowserRouter>
       <Refine routerProvider={routerProvider}>
         <Routes>
           {/* Your route definitions */}
         </Routes>
       </Refine>
     </BrowserRouter>
   );

See example setup 3. Define your resources and their paths in the resources array. SSR Considerations - React Router v7 does not natively support SSR: Unlike Remix or Next.js, React Router does not provide a built-in SSR solution. If you want SSR, you need to implement it yourself, typically by rendering your React app on the server (e.g., with Express and ReactDOMServer). - No automatic data prefetching: You must handle data fetching and hydration manually. Refine’s data hooks (like useList, useTable) expect to run on the client, so you’ll need to pass initial data as props if you want SSR. - No file-based routing: You define all routes manually, unlike Remix or Next.js. Migrating from Remix If you are migrating from Remix to React Router v7, you lose built-in SSR and data loading conventions. You would need to: - Set up your own SSR infrastructure (e.g., using Express and ReactDOMServer). - Manually fetch data on the server and hydrate it on the client. - Pass initial data to Refine hooks using their queryOptions.initialData prop if you want to avoid double-fetching. Official Guidance Refine’s team recommends using the Remix router for SSR, as it is designed for that purpose. If you want to use React Router v7 for SSR, you must implement the SSR logic yourself. If you need features like SSR, data loading, and routing conventions, Remix or Next.js are better suited and have first-class support in Refine.

Users who want Remix v3 should switch their routerProvider to @refinedev/react-router. If you find any missing features in @refinedev/react-router, please don’t hesitate to open an issue 🙌

See GitHub Issue #6670

Refine can be used in any platform you want with any routing method you prefer. It can even be used with React Native and Electron. While SSR and custom routing frameworks are an option with Refine, react-admin does not provide such support for them.

React-admin vs Refine - Routing and SSR Summary - Yes, you can use Refine with React Router v7. - SSR is possible, but you must implement it yourself. - For built-in SSR support, use Remix or Next.js with Refine. If you need a working SSR example with React Router v7, the knowledge sources do not provide one directly. For SSR out-of-the-box, Remix or Next.js are the recommended approaches with Refine. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

<@419902216531476490> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

correct-apricotOP•4w ago

message.txt

React Router v7 in Framework mode

Did you find this page helpful?