如何使用 Next.js 的 shallow routing？

推荐答案

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

使用示例

-- -------------------- ---- -------
------ - --------- - ---- --------
------ - --------- - ---- --------------

----- ----------- - -- -- -
  ----- ------ - ------------

  ------------ -- -
    -- -- ------- ------- ------
    -------------------------------- ---------- - -------- ---- ---
  -- ----

  ------ -
    -----
      ----------- ------- ------------
      ---------- -------- --------------------------
    ------
  --
--

------ ------- ------------

关键点

• 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 会重新获取数据并重新渲染页面，因此需要确保页面在刷新后仍能正确显示。

示例代码解析

-- -------------------- ---- -------
------ - --------- - ---- --------
------ - --------- - ---- --------------

----- ----------- - -- -- -
  ----- ------ - ------------

  ------------ -- -
    -- -- ------- ------- ------
    -------------------------------- ---------- - -------- ---- ---
  -- ----

  ------ -
    -----
      ----------- ------- ------------
      ---------- -------- --------------------------
    ------
  --
--

------ ------- ------------

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

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