Routing (React-Router)
Load Lazy When Routing
I need to load pages lazy on my website https://onurdayibasi.dev. In this blog post, I mention lazy loading with react-router.
On my website https://onurdayibasi.dev, I try different libraries and technology for experimental and learning new things. Suppose your code is static routing like below. The Application load all of the pages and dependent libraries in the first page render. But this kind of development has some problems with latency and unnecessary network usage. It affects First Contentful Paint (FCP) and Largest Contentful Paint (LCP).
Maybe it's not essential small projects, or the pages are related, and there is no need to load different kinds of libraries.
But in my case, I use lots of different frameworks on every page, so I need lazy page loads.
React Lazy provides to load components Lazy with Suspense wrapping. So first, define your routing with React Lazy.
I change the routing code with lazy import. After changing lazy, there is no need to define pages static because Route can also take components programmatically. First, we define routes data and give to routes array to App. Below code add new routing paths easily
In the end, you have two jobs to add new plants(pages) to the system. First, develop the page, then give the route definition.
Let's continue reading 😃
You can find similar samples and writings at this link. If you like this story. Please 👏👏 and share
