如何在路径切换时阻止React路由组件unmount，保留组件状态？

要避免路由切换时组件卸载、保留状态，核心是让组件始终挂载在DOM中，通过路由变化控制显示/隐藏，而非依赖路由系统的匹配逻辑卸载组件。以下是针对你的代码的具体修改方案：

方案实现步骤 #

1. 修改路由配置（index.js） #

将所有路由指向App组件，让App统一管理子组件的显示：

import React from "react";
import { createRoot } from "react-dom/client";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<App />} />
      <Route path="/first" element={<App />} />
      <Route path="/second" element={<App />} />
    </Routes>
  </BrowserRouter>
);

2. 改造App组件控制子组件显示 #

在App中引入First、Second组件，通过useLocation获取当前路由，用条件渲染控制组件的显示状态：

import * as React from "react";
import { Link, useLocation } from "react-router-dom";
import First from "./routes/First";
import Second from "./routes/Second";

export default function App() {
  const location = useLocation();

  return (
    <div>
      <h1>Prevent Routing</h1>
      <nav
        style={{
          borderBottom: "solid 1px",
          paddingBottom: "1rem"
        }}
      >
        <Link to="/first">First</Link> | <Link to="/second">Second</Link> | <Link to="/">Home</Link>
      </nav>
      {/* 根据当前路由控制组件显示/隐藏 */}
      <div style={{ display: location.pathname === "/first" ? "block" : "none" }}>
        <First />
      </div>
      <div style={{ display: location.pathname === "/second" ? "block" : "none" }}>
        <Second />
      </div>
    </div>
  );
}

3. 验证效果 #

修改后切换路由时，First和Second组件不会触发unmount日志，它们的状态会被完整保留。你可以在组件中添加state（比如输入框内容）测试，切换路由后状态不会丢失。

原理说明 #

原路由配置中，Routes组件会在路径匹配变化时卸载不匹配的Route对应的组件。改造后，First和Second始终挂载在App的DOM树中，只是通过CSS的display属性控制可见性，因此不会触发组件的挂载/卸载生命周期，状态自然得以保留。

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