Question

我在动态路线上使用了反应懒惰和悬念，但是以某种方式我无法渲染延迟加载的组件。

我已经搜索过在路由上使用懒惰的方法，但是我还没有看到有人在动态（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

尝试this，

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

Answer 2

我认为，使用Suspense或lazy没问题。只是以错误的方式使用Switch。

react router 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 3

我已经找到了解决方案..或我的情况。

我在捆绑商品中包括了publicPath。

我将此添加到了webpack.config.js

output: {
        publicPath: '/',
      },

为什么上次它不起作用的问题是，我只是在刷新页面时知道已经安装了hotmodule，但是它没有更新我的配置。

所以重启服务器后，我看到了那一行

webpack输出来自（我声明的publicPath）

尽管我花了很多时间解决这个问题。感谢您的所有评论。

反应未在动态路由上加载的惰性组件

3 个答案: