reactjs - React 惰性组件未加载到动态路由上

Question

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

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

我只想在进入该路线后加载我的组件。但结果是它加载了主页，但是当我从选择中选择一个时，它只显示带有空白的index.html我没有看到任何错误产生。

Answer 1

我觉得，使用react没有问题 悬念或者偷懒。只需使用 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