React Router V6路由切换重复渲染问题及解决方案咨询

问题根源 #

React Router V6的<Routes>组件在路由切换时，会直接卸载不匹配当前路径的路由元素——哪怕你用React.memo包裹组件也没用，因为组件都被卸载了，切换回来必然会重新挂载，导致useEffect(() => [], [])这类仅在挂载时执行的逻辑重复触发。

解决方案：手动控制组件显隐 #

放弃<Routes>的自动卸载逻辑，改用useLocation获取当前路径，让所有路由组件始终留在DOM里，只通过样式或条件渲染控制可见性。

修改后的完整代码 #

import React, { useEffect } from "react";
import { BrowserRouter as Router, useNavigate, useLocation } from "react-router-dom";

export default function App() {
  return (
    <Router>
      <RouteContainer />
    </Router>
  );
}

function RouteContainer() {
  const location = useLocation();

  return (
    <>
      {/* 始终渲染组件，用display控制显示/隐藏 */}
      <div style={{ display: location.pathname === "/" ? "block" : "none" }}>
        <RouteA />
      </div>
      <div style={{ display: location.pathname === "/b" ? "block" : "none" }}>
        <RouteB />
      </div>
    </>
  );
}

function RouteA() {
  const navigate = useNavigate();
  
  useEffect(() => {
    alert("Render Router A");
  }, []);

  return (
    <button onClick={() => navigate("/b")}>Go to B</button>
  );
}

function RouteB() {
  const navigate = useNavigate();
  
  useEffect(() => {
    alert("Render Router B");
  }, []);

  return (
    <button onClick={() => navigate("/")}>Go to A</button>
  );
}

核心逻辑说明 #

• 用useLocation实时获取当前路径，替代<Routes>的自动匹配卸载机制
• 所有路由组件始终处于挂载状态，仅通过display: none隐藏非当前路由的组件，不会触发卸载/重新挂载
• 这样useEffect只会在组件首次渲染时执行一次，路由切换不会重复触发数据请求或初始化逻辑

进阶：封装通用KeepAlive组件 #

可以把显隐逻辑封装成通用组件，方便复用：

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

function KeepAlive({ path, children }) {
  const location = useLocation();
  const isActive = location.pathname === path;
  
  return (
    <div style={{ display: isActive ? "block" : "none" }}>
      {children}
    </div>
  );
}

// 使用示例
function RouteContainer() {
  return (
    <>
      <KeepAlive path="/">
        <RouteA />
      </KeepAlive>
      <KeepAlive path="/b">
        <RouteB />
      </KeepAlive>
    </>
  );
}

注意事项 #

• 这种方式会让所有路由组件常驻DOM，初始渲染时会加载所有组件的资源，适合组件数量不多、需要保留状态的场景
• 如果组件中有定时器、窗口事件监听等副作用，因为组件不会被卸载，建议在组件隐藏时手动清理相关逻辑，避免内存泄漏

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