Реагировать на ленивые компоненты, не загруженные на динамических маршрутах

Question

Я использовал реагировать ленивый и неизвестный на динамических маршрутах, но почему-то я не могу рендерить лениво загруженные компоненты.

Я уже искал об использовании lazy на маршрутах, но я не видел, чтобы кто-нибудь использовал его на динамических (localhost: 8080 /dynamic/dynamic) маршрутах.

загрузка компонентов по динамическим маршрутам работает для меня, ленивая загрузка также работает, если у меня есть статический маршрут, но когда я попытался объединить их, компонент не загружается.

вот пример того, что я сделал,

import Loader from './path/toFile';
import Home from './path/toFile';
const LazyLoadedComponent = lazy(() => import('./path/toFile'));

const App = () => {
 return(
  <Router>
     <Switch>

        // Home has multiple views controlled by buttons
        // A view contains selections with corresponding id
       <Route exact path="/:viewType?" component={Home} /> 

       // this component doesn't load when I select something which links me to this dynamic route.
       <Suspense fallback={Loader}>
         <Route path="/viewType/:selectionId" component={LazyLoadedComponent} />
       </Suspense>

     </Switch>
   </Router>
 )
}

Я просто хочу, чтобы мой компонент загружался, когда я иду по этому маршруту. Но результат в том, что он загружает Home, но когда я выбираю один из них, он просто показывает index.html с пробелом, и я не вижу никакой ошибки.

Answer 1

Я нашел решение.. или вроде как в моем случае.

Я включил publicPath для своих пакетов.

Я добавил это в мой webpack.config.js

output: {
        publicPath: '/',
      },

и проблема, почему это не сработало в прошлый раз, заключается в том, что я просто обновляю страницу, зная, что установлен hotmodule, но он не обновляет мои конфигурации.

Поэтому после перезапуска сервера я увидел строку

Вывод webpack подается из (publicPath, который я объявил)

Хотя я потратил на эту проблему больше времени, чем следовало бы. Это работает сейчас, спасибо за все комментарии.

Answer 2

Я думаю, нет проблем в использовании, реагируют на приостановку или ленивость. просто используйте Switch неправильно.

Как реагирует роутер док:

Все дети <Switch> должно быть <Route> или же <Redirect> элементы. Будет обработан только первый дочерний элемент, соответствующий текущему местоположению.

Так, Switch Компонент может не распознавать маршрут, который обернут компонентом Suspense.

например:

import Loader from './path/toFile';
import Home from './path/toFile';
const LazyLoadedComponent = lazy(() => import('./path/toFile'));

const App = () => {
 return(
   <Router>
     <Suspense fallback={Loader}>
       <Switch>
         <Route exact path="/:viewType?" component={Home} /> 
         <Route path="/viewType/:selectionId" component={LazyLoadedComponent} />
       </Switch>
     </Suspense>
   </Router>
 )
}

Вот пример в песочнице кода: https://codesandbox.io/s/async-react-router-v4-w-suspense-8p1t6

Answer 3

Попробуй это,

 <Suspense fallback={Loader}>
   <Switch>
     <Route path="/viewType/:selectionId" />
         <LazyLoadedComponent />
     </Route>
   </Switch>
 </Suspense>

Answer 4

Я решил это, внеся некоторые дополнительные изменения в webpack.config. первая конфигурация извлечения с использованием

npm run eject.

webpack.config.js

      path: isEnvProduction
            ? path.resolve(__dirname, "..", "build")
            : undefined,
    
filename: isEnvProduction
            ? "[name].js"
            : isEnvDevelopment && "static/js/bundle.js",
    
chunkFilename: isEnvProduction
            ? "[name].chunk.js"
    
publicPath: "/",