如何在NextJS中使用router切换locale并解决TypeError报错问题

• 直接错误：报错行中使用的router.path属性不存在于next/router返回的路由实例中，正确属性为router.pathname。属性写错导致路由跳转参数异常，触发项目中路由中间件/守卫的逻辑错误，因此抛出读取undefined的auth属性的报错。
• 场景适配错误：如果使用的是Next.js 13+的App Router，next/router是Pages Router专用钩子，引用错误也会导致路由实例属性异常。

Pages Router 适配（对应你原本的写法） #

import { useRouter } from 'next/router'

const ChooseLocale = () => {
    const router = useRouter();
    
    const changeLocale = (locale) => {
        // asPath可保留当前页面的查询参数、动态路由参数、hash，避免跳转后丢失页面状态
        router.push(router.asPath, router.asPath, { locale, scroll: false });
    }

    return <ul>
         <li onClick={() => changeLocale('en')}>En</li>
         <li onClick={() => changeLocale('fr')}>Fr</li>
         <li onClick={() => changeLocale('ru')}>Ru</li>
    </ul>
}
export default ChooseLocale;

补充说明：

• 新增scroll: false配置可避免切换语言时页面滚动到顶部，优化交互体验。
• 如果修改后仍报auth相关错误，检查next.config.js的i18n配置是否正确，以及路由中间件代码是否在处理locale跳转时误读了不存在的auth字段。

App Router 适配（Next.js 13+版本） #

如果项目使用App Router，需使用新的路由钩子，代码如下：

'use client'; // 客户端组件必须添加该标识
import { useRouter, usePathname } from 'next/navigation'

const ChooseLocale = () => {
    const router = useRouter();
    const pathname = usePathname();
    
    const changeLocale = (locale) => {
        // 替换当前路径的locale前缀即可完成切换
        router.replace(`/${locale}${pathname}`);
    }

    return <ul>
         <li onClick={() => changeLocale('en')}>En</li>
         <li onClick={() => changeLocale('fr')}>Fr</li>
         <li onClick={() => changeLocale('ru')}>Ru</li>
    </ul>
}
export default ChooseLocale;

补充说明：

• App Router下的useRouter来自next/navigation，和Pages Router的钩子不是同一个实现，不要混用。
• locale切换组件属于客户端交互组件，必须标记'use client'。

如果修改代码后仍报错：

• 检查是否在服务端组件中调用了useRouter，服务端组件不能使用客户端钩子，必须将切换组件标记为客户端组件。
• 确认next.config.js中已经正确配置i18n的locales列表，包含你要切换的所有locale值。

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