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?


5 Replies
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:
----------------------
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:
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.
<@1085258022416285727> kapa.ai is still learning and improving, please let us how it did by reacting below
adverse-sapphire•2y ago
Hey @j7.dev I don't think your question is about
refine
. Because refine
doesn't care about router.rival-blackOP•2y ago
@yildirayunlu got it, I will try it tomorrow