NextJS 13.4.4中usePathname返回null及路由相关报错求助

我正在使用NextJS 13.4.4版本，尝试实现激活状态的导航链接，但遇到了获取当前URL的问题，所有尝试均失败。

项目目录结构 #

• .next
• components
  • Header
    • header.tsx
    • navbar.tsx <<<< 我正在编辑的文件
• pages //我的页面存放在这里
  ...

当前navbar代码 #

'use client'

import React from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { useRouter } from 'next/router';

export const Navbar = (props:any):JSX.Element =>{
    const links = [
        {
            path: "/",
            name: "Home"
        },
        {
            path: "/about", 
            name: "Resume"
        },
        {
            path: "/projects",
            name: "Projects"
        },
        {
            path: "/contact",
            name: "Contact Me"
        }
    ];

    const router = useRouter();
    const url = usePathname();
    //const url = router.pathname;

    return(
        <nav className="navbar navbar-dark navbar-expand-lg border-bottom topNav">
            <div className="container-fluid">
                <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span className="navbar-toggler-icon"></span>
                </button>
                <div className="collapse navbar-collapse justify-content-center w-100 mt-3 mt-lg-auto" id="navbarNav">
                    <ul className="navbar-nav justify-content-center">
                        {links.map((link, index):JSX.Element =>{
                            return(
                            <li className="nav-item px-5" key={index}>
                                <Link className={
                                    url === link.path ? "nav-link text-white navLink activeLink"
                                    : "nav-link text-white navLink"
                                    } aria-current="page" href={link.path}>{link.name}</Link>
                            </li>
                            )
                        })}
                    </ul>
                </div>
            </div>
        </nav>
    );
}

尝试过的方法 #

方法一：使用next/router的useRouter #

import { useRouter } from 'next/router'

export default Navbar = () =>{
   const router = useRouter();
   const url = router.pathname;
   ...
}

结果：应用崩溃，出现**"NextRouter not mounted"**错误。

方法二：使用next/navigation的usePathname #

import { usePathname } from 'next/navigation'

export default Navbar = () =>{
   const url = usePathname();
   ...
}

结果：url的值为null。

方法三：使用next/navigation的useRouter #

import { useRouter } from 'next/navigation'

export default Navbar = () =>{
   const router = useRouter();
   console.log(router)
   ...
}

结果：触发**"Error: invariant expected app router to be mounted"**错误。

编辑：问题解决 #

经过进一步查阅资料，发现项目配置存在问题：我使用了Next 13+中为App Router设计的特性，但项目实际使用的是Pages Router。虽然两者可以兼容，但继续使用Pages Router会在这类简单操作上浪费大量精力，因此决定重构项目以使用App Router，现在一切运行正常。

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