如何使用 Next.js 的 shallow routing？

推荐答案

在 Next.js 中，shallow routing 允许你在不触发 getStaticProps、getServerSideProps 或 getInitialProps 的情况下更改 URL。这对于在页面内部进行状态管理或更新查询参数非常有用，而不需要重新加载页面或重新获取数据。

使用示例

// www.javascriptcn.com code example
import { useEffect } from 'react';
import { useRouter } from 'next/router';

const MyComponent = () => {
  const router = useRouter();

  useEffect(() => {
    // 使用 shallow routing 更新查询参数
    router.push('/about?counter=10', undefined, { shallow: true });
  }, []);

  return (
    <div>
      <h1>Shallow Routing Example</h1>
      <p>Current Counter: {router.query.counter}</p>
    </div>
  );
};

export default MyComponent;

关键点

• router.push 方法的第三个参数 { shallow: true } 启用了 shallow routing。
• 页面不会重新加载，也不会触发数据获取方法（如 getStaticProps 或 getServerSideProps）。
• 只有 router.query 会更新，页面内容可以根据新的查询参数进行动态渲染。

本题详细解读

什么是 Shallow Routing？

Shallow routing 是 Next.js 提供的一种路由方式，允许你在不重新加载页面或重新获取数据的情况下更改 URL。这对于需要在页面内部更新查询参数或状态，而不希望触发页面重新加载或数据获取的场景非常有用。

使用场景

1. 更新查询参数：例如，在分页或过滤数据时，更新 URL 中的查询参数而不重新加载页面。
2. 状态管理：在页面内部管理状态时，通过 URL 来反映当前状态，而不触发数据重新获取。

注意事项

• 数据获取：使用 shallow routing 时，getStaticProps、getServerSideProps 或 getInitialProps 不会被调用。因此，如果你需要根据新的查询参数重新获取数据，可能需要手动处理。
• 页面刷新：如果用户手动刷新页面，Next.js 会重新获取数据并重新渲染页面，因此需要确保页面在刷新后仍能正确显示。

示例代码解析

// www.javascriptcn.com code example
import { useEffect } from 'react';
import { useRouter } from 'next/router';

const MyComponent = () => {
  const router = useRouter();

  useEffect(() => {
    // 使用 shallow routing 更新查询参数
    router.push('/about?counter=10', undefined, { shallow: true });
  }, []);

  return (
    <div>
      <h1>Shallow Routing Example</h1>
      <p>Current Counter: {router.query.counter}</p>
    </div>
  );
};

export default MyComponent;

• useRouter：Next.js 提供的 Hook，用于访问路由对象。
• router.push：用于导航到新的 URL。第三个参数 { shallow: true } 启用了 shallow routing。
• useEffect：在组件挂载后执行 router.push，更新查询参数。

通过这种方式，你可以在不重新加载页面的情况下更新 URL 并动态渲染页面内容。