Next.js中<Route>组件替代方案及URL查询参数处理相关问题问询

问题1解答 #

该需求可以直接实现，无需引入react-router，Next.js原生路由默认就是客户端跳转、无页面刷新的，天然支持路由与渲染组件的绑定，具体实现根据你使用的路由模式分为两类：

• 若使用Pages Router（Next.js 13之前的默认路由方案）：
  直接在项目根目录的pages文件夹下创建对应文件，文件中直接导出你写好的自定义组件即可完成绑定：
  • 路由/对应pages/index.js/pages/index.tsx，文件内导出homePage组件
  • 路由/about对应pages/about.js/pages/about.tsx，文件内导出aboutPage组件
  • 路由/faq对应pages/faq.js/pages/faq.tsx，文件内导出faqPage组件
• 若使用App Router（Next.js 13+的默认路由方案）：
  在项目根目录的app文件夹下创建对应路由段目录，每个目录下新建page.js/page.tsx文件导出对应组件即可完成绑定：
  • 路由/对应app/page.js，文件内导出homePage组件
  • 路由/about对应app/about/page.js，文件内导出aboutPage组件
  • 路由/faq对应app/faq/page.js，文件内导出faqPage组件

页面跳转直接使用Next.js自带的next/link组件即可，默认走客户端无刷新跳转，完全符合你的要求。

问题2解答 #

该场景的最佳实践是在对应页面的客户端生命周期钩子中，调用Next.js路由的replace方法清除查询参数，不会触发额外的页面请求，性能最优：

Pages Router 实现代码 #

import { useRouter } from 'next/router'
import { useEffect } from 'react'

export default function ProductsPage() {
  const router = useRouter()
  useEffect(() => {
    // 仅存在查询参数时执行URL替换
    if (Object.keys(router.query).length > 0) {
      router.replace('/products', undefined, { shallow: true })
    }
  }, [router])

  // 此处写你页面的其余业务逻辑
}

其中shallow: true参数可以保证仅修改URL，不会重新触发页面的数据获取、渲染生命周期，开销最小。

App Router 实现代码 #

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

export default function ProductsPage() {
  const pathname = usePathname()
  const router = useRouter()
  useEffect(() => {
    if (window.location.search) {
      router.replace(pathname, { shallow: true })
    }
  }, [pathname, router])

  // 此处写你页面的其余业务逻辑
}

注意App Router中使用客户端钩子需要在文件顶部加'use client'标记。

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