React-Router路由切换时重复渲染组件问题求助

问题根源分析 #

你遇到的核心问题有两个：

1. 主应用中Route的组件传递方式错误
   你在主应用里使用了component={() => <Routes userRole={user.Role} />}这种写法，component属性接收的应该是组件的构造函数/引用，而不是一个返回组件元素的匿名函数。这种写法会导致每次路由路径变化时，React都会创建一个全新的匿名组件实例，旧的Routes组件会被卸载，新的被挂载，自然会重复执行角色切换逻辑，丢失页面状态。

2. Routes组件内部重复创建懒加载组件
   在Routes组件的函数体中，每次渲染都会根据userRole重新创建Loadable组件实例（比如Loadable({...})）。即使userRole没有变化，这个新创建的Loadable组件对React来说也是一个全新的组件类型，会触发组件的卸载和重新挂载，导致状态丢失。

分步解决方案 #

1. 修正主应用中Route的组件传递方式

把component属性替换为render属性，用这种方式传递动态props不会创建新的组件实例：

// 主应用中的路由渲染部分
{user && <Route path="/" render={() => <Routes userRole={user.Role} />} />}

如果想进一步优化，也可以通过React上下文或Redux来传递userRole，避免每次render都创建匿名函数，但上面的写法已经能解决核心问题。

2. 将懒加载组件的定义移到Routes组件外部

不要在Routes的渲染函数里重复创建Loadable组件，而是把它们定义在组件外部，确保每个角色对应的路由组件只被创建一次：

import * as React from 'react';
import LoadingPage from '../../components/sharedPages/loadingPage/LoadingPage';
import * as Loadable from 'react-loadable';

// 提前定义好所有角色对应的懒加载组件，只创建一次
const AdminRoutes = Loadable({
  loader: () => import('./systemAdminRoutes/SystemAdminRoutes'),
  loading: () => <LoadingPage />
});

export interface RoutesProps {
  userRole: string;
}

const Routes = ({ userRole }) => {
  let RoleRoutesComponent: any = null;
  switch (userRole) {
    case "Admin":
      RoleRoutesComponent = AdminRoutes; // 直接引用提前定义好的组件
      break;
    // 其他角色的路由组件也按同样方式定义在外部
    default:
      break;
  }

  return RoleRoutesComponent ? <RoleRoutesComponent /> : null;
}

export default Routes;

3. 额外优化：给SystemAdminRoutes中的路由设置唯一key

虽然你提到问题和Switch无关，但为了避免不必要的渲染，建议给每个Route设置唯一的key，而不是统一用"/"：

const SystemAdminRoutes = () => {
  return (
    <Switch>
      <Route key="home" exact path="/" component={HomePage} />
      <Route key="home-alias" exact path="/home" component={HomePage} />
      <Route key="second" path="/second" component={SecondPage} />
      <Route key="third" path="/third" component={ThirdPage} />
      {/* ...其他路由 */}
      <Route key="not-found" component={NotFoundPage} />
    </Switch>
  );
}

总结 #

通过这两个核心修改：

• 修正主应用Route的组件传递方式，避免每次路由变化都创建新的组件实例
• 将懒加载组件的定义移到Routes组件外部，确保组件类型稳定
  就能解决路由切换时Routes组件重复渲染、状态丢失的问题。

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