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

Question

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

我已经搜索过 lazy 在路由上的使用，但我还没有看到有人在 dynamic(localhost:8080/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>
 )
}

我只想在我转到那条路线后加载我的组件。但是结果是它加载了主页但是当我 select 一个来自 selection 时它只显示 index.html 空白我还没有看到产生任何错误。

Answer 1

尝试this,

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

Answer 2

我觉得，用react Suspense或者lazy都没有问题。只是用错了 Switch 而已。

正如react router doc所说：

All children of a <Switch> should be <Route> or <Redirect> elements. Only the first child to match the current location will be rendered.

因此，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 3

我找到了解决方案..或者对我来说有点。

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

我在 webpack.config.js

上添加了这个

output: {
        publicPath: '/',
      },

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

所以在重新启动服务器后我看到了行

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

虽然我在这个问题上花的时间比我应该花的时间多。现在可以使用了，感谢所有评论。

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: "/",

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

React lazy components not loaded on dynamic routes

lazy-loading

reactjs

react-router

react-suspense