Next.js App Router：页面导航时实现组件重渲染而非重新挂载

要实现客户端组件Component重渲染但不重新挂载，核心是让它脱离Page的渲染上下文（Page作为服务端组件，导航时会重新生成实例，导致其子组件被卸载），同时让它感知页面路由变化来触发重渲染。以下是具体实现方式：

1. 用路由钩子监听变化触发重渲染 #

直接在Component内部使用Next.js客户端路由钩子（usePathname/useSearchParams）监听路由变化，通过状态更新触发重渲染，同时将Component放在Layout与Page同级的位置：

'use client';
import { usePathname } from 'next/navigation';
import { useEffect, useState } from 'react';

export default function Component() {
  const pathname = usePathname();
  // 用路由路径作为依赖，触发页面变化后的逻辑
  const [pageRelatedState, setPageRelatedState] = useState({});

  useEffect(() => {
    // 这里编写页面切换时需要执行的逻辑（比如重新拉取数据、更新状态）
    setPageRelatedState({
      currentPage: pathname.split('/')[1]
    });
  }, [pathname]);

  return (
    <div>
      当前页面：{pathname}
      {/* 基于pageRelatedState渲染内容 */}
    </div>
  );
}

这种方式下，Component会一直挂载在Layout中，不会随Page切换而卸载；路由变化时，pathname更新触发useEffect和状态变更，从而触发组件重渲染。

2. 通过客户端容器组件管理状态 #

如果需要将路由相关状态与Component解耦，可以在Layout中添加一个客户端容器组件，由它监听路由变化并传递props给Component：

// Layout.tsx（服务端组件）
import ComponentContainer from './ComponentContainer';

export default function Layout({ children }) {
  return (
    <div className="layout">
      {children} {/* Page组件 */}
      <ComponentContainer />
    </div>
  );
}

// ComponentContainer.tsx（客户端组件）
'use client';
import { usePathname } from 'next/navigation';
import Component from './Component';

export default function ComponentContainer() {
  const pathname = usePathname();
  // 将路由信息作为props传递给Component
  return <Component activePath={pathname} />;
}

// Component.tsx（客户端组件）
export default function Component({ activePath }) {
  // 基于activePath的变化重渲染内容
  return <div>当前激活路径：{activePath}</div>;
}

容器组件作为稳定的父级挂载在Layout中，Component不会被卸载；当路由变化时，activePath props更新，触发Component重渲染。

关于key的误区说明 #

之前给Component添加静态key无效，是因为Page作为服务端组件，每次导航都会生成全新的Page实例，其内部的子组件树会被完全卸载重建——key仅能在同一父组件实例下复用组件，无法跨Page实例保留组件挂载状态。

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