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

Question

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

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

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

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

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

Думаю, нет проблем в использовании, реагируют на Suspense или lazy.просто неправильно используйте Switch.

Как реагирует маршрутизатор doc скажет:

Все дочерние элементы <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 2

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

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

Answer 3

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

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

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

output: {
        publicPath: '/',
      },

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

Итак, после перезапуска сервера я увидел строку

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

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