如何在NextJS中切换路径时仅更新单个组件而不触发导航？

没问题，我来帮你用Next.js实现这个需求——核心就是利用**浅路由（shallow routing）**结合路由状态监听，完全不需要切换到react-router。下面是具体的实现步骤和完整代码：

核心思路 #

1. 使用Next.js的useRouter钩子获取路由实例，通过shallow={true}启用浅路由，点击Link时仅更新URL而不触发页面重载。
2. 监听URL路径的变化，同步更新组件的本地状态，让段落显示对应的值。

完整实现代码 #

import React, { useState, useEffect } from 'react';
import Link from 'next/link';
import { useRouter } from 'next/router';

const Example = () => {
  const router = useRouter();
  // 初始化状态，根路径下显示空值
  const [currentValue, setCurrentValue] = useState('');

  // 监听URL路径变化，同步更新状态
  useEffect(() => {
    // 解析当前路径：根路径为空，/value1取value1，/value2取value2
    const pathValue = router.asPath.slice(1);
    setCurrentValue(pathValue);
  }, [router.asPath]); // 依赖项为asPath，路径变化时触发

  return (
    <div>
      <div>
        <h1>Example</h1>
        {/* 给Link添加shallow={true}启用浅路由，避免页面重载 */}
        <Link href="/value1" shallow={true}>
          <a>Link 1</a>
        </Link>
        {/* 可以添加空格或分隔符优化排版 */}
        &nbsp;|&nbsp;
        <Link href="/value2" shallow={true}>
          <a>Link 2</a>
        </Link>
        &nbsp;|&nbsp;
        <Link href="/" shallow={true}>
          <a>回到根路径</a>
        </Link>
      </div>
      <div>
        {/* 显示当前解析出的值 */}
        <p>Value: {currentValue}</p>
      </div>
    </div>
  );
};

export default Example;

关键细节说明 #

• shallow={true}属性：这是实现无重载URL更新的核心，告诉Next.js只更新客户端的URL和路由状态，不会重新运行getStaticProps/getServerSideProps，也不会触发页面组件的重新挂载。
• 路由监听：通过useEffect监听router.asPath的变化，每次路径更新时自动解析路径并同步状态。asPath是当前URL的完整路径字符串，适合用来判断当前路由。
• 路由配置：确保/、/value1、/value2都指向这个页面组件。如果你的项目中这些路径原本对应不同页面，需要在next.config.js中添加重写规则，或者使用动态路由（比如pages/[value].js）来统一处理。

补充说明 #

如果需要处理更复杂的路径参数，比如带查询字符串的情况，可以用router.query来获取参数，配合浅路由同样能实现无重载更新。浅路由的限制是只能在同一个页面组件内生效，所以所有需要切换的路径必须指向同一个页面。

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