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

嘿，你猜得完全正确！问题确实出在render属性的函数上——更准确地说，是你为每个路由单独创建了<Route>组件，每个<Route>的render回调每次都会生成一个新的组件实例。当路由切换时，前一个<Route>会被卸载，它渲染的组件自然也跟着卸载；新的<Route>挂载时又会重新创建组件实例，所以就出现了重复挂载的情况。

下面给你几个可行的解决方案，根据你的实际场景选择：

方案1：用单个Route匹配所有目标路径 #

把原来的多个<Route>合并成一个，让它匹配所有需要复用组件的路径，这样组件只会被挂载一次，路由切换时只会触发组件更新而非重新挂载。

示例代码改造：

// 原来的写法
{routes.map(route => (
  <Route 
    key={route.path} 
    path={route.path} 
    render={() => <MyConnectedComponent {...route.props} />} 
  />
))}

// 改造后的写法
<Route
  path={routes.map(route => route.path)} // 传入路径数组，匹配任意一个
  render={({ match }) => {
    // 根据当前匹配的路径找到对应的路由配置
    const currentRoute = routes.find(route => route.path === match.path);
    // 渲染组件并传递对应props
    return <MyConnectedComponent {...currentRoute.props} />;
  }}
/>

这样不管切换到哪个目标路由，这个<Route>始终存在，组件也只会挂载一次，只会在路由变化时更新props。

方案2：将组件提升到Route外部，通过路由状态控制props #

如果你的路由逻辑比较复杂，不想合并Route，可以把共享组件提到所有Route的父级，然后通过useLocation或useParams等钩子获取当前路由信息，再给组件传递对应的props。

示例：

import { useLocation } from 'react-router-dom';

function ParentComponent() {
  const location = useLocation();
  const currentRoute = routes.find(route => route.path === location.pathname);

  return (
    <div>
      {/* 其他路由内容 */}
      {currentRoute && <MyConnectedComponent {...currentRoute.props} />}
      {/* 其他路由内容 */}
    </div>
  );
}

这种方式下组件始终挂载在父组件中，路由切换时只会更新组件的props，不会触发卸载和重新挂载。

方案3：避免在render回调中创建新组件实例（针对单Route场景） #

如果你是在单个Route中使用render属性，但每次都创建新实例（比如不小心写成render={() => <MyComponent />}而不是直接传组件），可以直接把组件作为component属性传递，或者用React.memo包裹组件并确保props稳定：

// 推荐：用component属性代替render（当不需要动态传props时）
<Route path="/some-path" component={MyConnectedComponent} />

// 需要动态传props时，确保render回调返回的组件引用稳定
const MemoizedComponent = React.memo(MyConnectedComponent);

<Route
  path="/some-path"
  render={() => <MemoizedComponent fixedProp="value" />}
/>

总结一下，核心思路就是让组件的挂载/卸载不受单个Route的生命周期影响，要么让单个Route覆盖所有目标路径，要么把组件提到Route外部，脱离Route的控制范围。

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