optimistic-gold
optimistic-gold13mo ago

How Can I do code split in Refine

I want to do lazy load when user change route. ref: https://reactrouter.com/en/main/route/lazy check the picture #1 . And it said ⚠️ only work in data router . What is data router? ref: https://reactrouter.com/en/main/routers/picking-a-router#using-v64-data-apis check the picture #2 . Refine use BrowserRouter which is NOT data router. I've tried React.lazy to code split the pages, but it did NOT work. . Do anyone know how to do code split in Refine?
No description
No description
No description
5 Replies
kapa.ai
kapa.ai13mo ago
Hi @j7.dev. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
kapa.ai
kapa.ai13mo ago
---------------------- Refine uses React Router v6, and you can implement lazy loading with route-based code-splitting. To do this, you can use React.lazy() and Suspense when defining your routes. Here's an example from the provided extracts:
import React, { Suspense, lazy } from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

const Home = React.lazy(() => import("./Home"));
const About = React.lazy(() => import("./About"));

const App = () => (
<Router>
<Suspense fallback={<div>Loading...</div>}>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</Suspense>
</Router>
);
import React, { Suspense, lazy } from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

const Home = React.lazy(() => import("./Home"));
const About = React.lazy(() => import("./About"));

const App = () => (
<Router>
<Suspense fallback={<div>Loading...</div>}>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</Suspense>
</Router>
);
In this example, the Home and About components are lazily loaded when their respective routes are navigated to. Make sure to wrap your Routes component with Suspense and provide a fallback component to display while the lazy-loaded components are being fetched. Source: React Lazy Loading (https://refine.dev/blog/react-lazy-loading) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
A Guide on React Lazy Loading | refine
We will be looking at what lazy loading is, how it works, and how it can be used to improve the performance of React applications.
kapa.ai
kapa.ai13mo ago
<@1085258022416285727> kapa.ai is still learning and improving, please let us how it did by reacting below
national-gold
national-gold13mo ago
Hey @j7.dev I don't think your question is about refine. Because refine doesn't care about router.
optimistic-gold
optimistic-gold13mo ago
@yildirayunlu got it, I will try it tomorrow