React: routes are not preloaded

Describe the bug Routes are not preloaded if they are configured in the following manner:

To Reproduce

• Create routes

import { withQuicklink } from 'quicklink/dist/react/hoc.js'

export const routes = {
  home: {
    path: '/',
    element: withQuicklink(React.lazy(() => import('pages/Home'))),
  },
  about: {
    path: 'about',
    element: withQuicklink(React.lazy(() => import('pages/About'))),
  },
  contact: {
    path: 'contact',
    element: withQuicklink(React.lazy(() => import('pages/Contact'))),
  },
}

• Add those to react-router

import { useRoutes } from 'react-router-dom'

export const AppRoutes = () => {
  const renderRoutes = useRoutes(
    Object.values(routes).map((route) => ({
      path: route.path,
      element: <route.element />,
    }))
  )
  return renderRoutes
}

Expected behavior Route chunks should be preloaded.

Version:

• OS w/ version: [Linux]
• Browser w/ version [e.g. Chrome 81]

[anton-karlovskiy]

Hi @ryands17

We created this project for the same use case. https://github.com/anton-karlovskiy/cra-hover-prefetch Could you please check it and give me feedback? Thank you.

It was ejected create-react-app for configuring webpack-route-manifest. Probably it was setup with the old webpack-route-manifest which does not allow us to use window.__rmanifest.

[anton-karlovskiy]

@addyosmani @demianrenzulli cc @ryands17

Hi folks, I think we can close this issue.