Preload link

package.json

@@ -77,7 +77,7 @@
     "@prisma/client": "^5.18.0",
     "@swc/core": "^1.7.11",
     "@swc/jest": "^0.2.36",
-    "@swc/plugin-loadable-components": "^1.0.11",
+    "@swc/plugin-loadable-components": "^2.0.2",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.0.0",
     "@types/classnames": "^2.2.9",

src/components/molecules/Card/Card.tsx

@@ -1,4 +1,4 @@
-import { Link } from 'react-router-dom';
+import { Link } from 'src/components/molecules/Link/Link';
 
 import style from './Card.scss';
 

src/components/molecules/Header/Header.tsx

@@ -1,6 +1,6 @@
 import cx from 'classnames';
 import { useTranslation } from 'react-i18next';
-import { NavLink, Link } from 'react-router-dom';
+import { Link } from 'src/components/molecules/Link/Link';
 import { TOGGLE_MODAL, emitter } from 'src/libs/emitter';
 import { session } from 'src/libs/session';
 
@@ -37,14 +37,14 @@ export const Header: FunctionComponent = () => {
         <nav>
           <ul>
             <li>
-              <NavLink
+              <Link
                 to="/products"
                 className={({ isActive }) =>
                   isActive ? style.active : undefined
                 }
               >
                 {t('products')}
-              </NavLink>
+              </Link>
             </li>
             <li>
               <span

src/components/molecules/Link/Link.tsx

@@ -0,0 +1,32 @@
+import { NavLink, matchPath } from 'react-router-dom';
+import routes from 'src/routes';
+
+import type { FunctionComponent, MouseEventHandler } from 'react';
+import type { NavLinkProps } from 'react-router-dom';
+
+export const Link: FunctionComponent<NavLinkProps> = ({
+  style,
+  to,
+  className,
+  children,
+}) => {
+  const mouseOverHandler: MouseEventHandler = () => {
+    routes.forEach(({ children }) => {
+      children?.forEach(({ path, component }) => {
+        if (matchPath(path, to as string) && path !== '*') {
+          component.preload();
+        }
+      });
+    });
+  };
+  return (
+    <NavLink
+      style={style}
+      to={to}
+      className={className}
+      onMouseOver={mouseOverHandler}
+    >
+      {children}
+    </NavLink>
+  );
+};

src/components/organisms/Product/Product.tsx

@@ -1,6 +1,6 @@
 import cx from 'classnames';
-import { Link } from 'react-router-dom';
 import { Card } from 'src/components/molecules/Card/Card';
+import { Link } from 'src/components/molecules/Link/Link';
 
 import style from './Product.scss';
 

yarn.lock

@@ -1404,10 +1404,10 @@
     "@swc/counter" "^0.1.3"
     jsonc-parser "^3.2.0"
 
-"@swc/plugin-loadable-components@^1.0.11":
-  version "1.0.12"
-  resolved "https://registry.yarnpkg.com/@swc/plugin-loadable-components/-/plugin-loadable-components-1.0.12.tgz#35677396a81b999027f85f1f9f69988e4ff2b7c7"
-  integrity sha512-aZrPM64FndkqJJwETDbIOavnKsD+02NdjrWZqoFHvhyB/xq2v/807kEDrQCKFezgGxUDnz2odkEWcV3HhskDbw==
+"@swc/plugin-loadable-components@^2.0.2":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/@swc/plugin-loadable-components/-/plugin-loadable-components-2.0.2.tgz#b568d63cf234b0ed9d209497a4944e177fe51ad2"
+  integrity sha512-3QcThRp6Eh00GPQnmBSDwSHUlDyN54/WyWukj62OQfRdbvrEJmrl5WGRJ3l0Ij67X3//Ilf1LzTWIkW5On+qLg==
   dependencies:
     "@swc/counter" "^0.1.3"