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

Question

我在动态路由上使用了 reactlazy 和 suspense，但不知何故我无法渲染延迟加载的组件。

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

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

正如react router doc 所说：

<Switch> 的所有子元素都应该是 <Route> 或 <Redirect> 元素。只有第一个匹配当前位置的子节点才会被渲染。

所以，Switch 组件可能无法识别被 Suspense 组件包裹的 Route。

例如：

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

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

我为我的捆绑包添加了publicPath。

我在我的 webpack.config.js 中添加了这个

output: {
        publicPath: '/',
      },

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

所以重启服务器后我看到了这条线

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

尽管我在这个问题上花费的时间超出了我应有的时间。它现在正在工作，感谢所有 cmets。

Answer 3

试试this，

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