React Router v4+loadable-components始终渲染同一组件问题排查

我之前在项目里用React Router v4做懒加载的时候也踩过类似的坑！结合你的技术栈，大概率是路由配置或者懒加载组件的写法出了问题，咱们一步步来排查：

1. 最常见的原因：Route顺序与exact属性缺失 #

React Router v4的<Switch>会匹配第一个符合条件的Route，如果你的Dashboard路由是根路径/，而且没有加exact属性，那所有其他路由（比如/about、/settings）都会被判定为匹配/，导致始终渲染Dashboard。

举个反例（错误写法）：

<Switch>
  {/* 没有exact，所有路由都会匹配这个 */}
  <Route path="/" component={LoadableDashboard} />
  <Route path="/about" component={LoadableAbout} />
</Switch>

正确写法要给根路径加上exact：

<Switch>
  <Route exact path="/" component={LoadableDashboard} />
  <Route path="/about" component={LoadableAbout} />
  {/* 兜底的404路由放在最后 */}
  <Route component={NotFound} />
</Switch>

另外还要注意：更具体的路由要放在前面，比如/dashboard/detail要放在/dashboard之前，避免被提前匹配。

2. loadable-components的使用姿势错误 #

确保你正确用loadable包裹了每个懒加载组件，而不是重复导入了Dashboard：

正确的组件定义：

import loadable from '@loadable/component';

// 每个组件对应各自的导入路径
const LoadableDashboard = loadable(() => import('./pages/Dashboard'), {
  fallback: <div>加载中...</div>,
});

const LoadableAbout = loadable(() => import('./pages/About'), {
  fallback: <div>加载中...</div>,
});

如果不小心把所有懒加载组件都写成import('./pages/Dashboard')，那不管路由怎么匹配，加载的都是Dashboard组件，自然只会渲染它。

3. 检查是否有Route跳出了Switch范围 #

如果某些Route写在了<Switch>外面，那这些Route会独立匹配，不受Switch的排他性影响，但你说的是Switch内始终渲染Dashboard，所以这个可能性较低，但也可以检查一下。

4. Webpack配置的小坑（影响代码分割但不影响渲染） #

虽然这个不会导致渲染错误，但可以顺便确认Webpack 4的代码分割配置是否正确：确保你的Webpack配置里启用了chunkFilename，比如：

module.exports = {
  output: {
    filename: '[name].bundle.js',
    chunkFilename: '[name].chunk.js',
  },
};

这能确保loadable-components生成的代码块被正确命名和加载，但如果只是渲染错误，这个不是主要原因。

按照上面的步骤排查，应该能找到问题所在！

内容的提问来源于stack exchange，提问作者tommyalvarez