usePathname() returning null AND useRouter() causing "Error: NextRouter not mounted" and "Error: invariant expected app router to be mounted" errors

Question

I'm using NextJS version 13.4.4, and I've been trying to implement active navlinks. The issue is that for this solution, I want to access the current URL, but every attempt to do so ends up failing. My folder structure is like this:

.next
components
- Header
  - header.tsx
  - navbar.tsx <<<< the file i'm working in
pages //my pages are here ...

my navbar code looks like this:

'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>
    );
}

All suggestions welcome.

I've tried

import { useRouter } from 'next/router

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

which results in my app crashing and the 'NextRouter not mounted' error.

I've tried

import { usePathname } from 'next/navigation'

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

which results in 'url' being null.

And I've also tried this just to see what options I have for getting the URL from this

import { useRouter } from 'next/navigation

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

which resulted in "Error: invariant expected app router to be mounted"

EDIT: After further reading, I discovered that my setup was quite janky. I was using Next 13+ features designed to play well with the app router, but my project was using the pages router. Of course, I could have made it work, but I felt that continuing with the pages router would involve lots of wasted effort doing simple things like this, so I decided to restructure my app to take advantage of the app router instead. Now everything works like clockwork.

krishnaacharyaa · Accepted Answer · 2023-07-11 06:10:15Z

3

Major changes

import { useRouter } from 'next/router'; ❌ Not supported in Nextjs 13.4
import { useRouter } from 'next/navigation'; ✅ supported in Nextjs 13.4

For pathName not to be null you need to pass path using useRouter i.e

import { useRouter } from 'next/navigation'; // important
router = useRouter();
router.push(pages/<your_page_here>);

answered Jul 11, 2023 at 6:10

krishnaacharyaa

26.1k9 gold badges102 silver badges138 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

CjL95 Over a year ago

I appreciate your reply. Pushing the path did fix the router error. I had to put the push inside of useEffect though. However, pathname was still null unfortunately. After further reading, I learned that I was using next 13+ features with a pages router that they were not designed to work with, so decided to restructure my app to use the app router instead of the pages router. Suddenly all my problems disappeared. Thank you for nudging me in the right direction!

Collectives™ on Stack Overflow

usePathname() returning null AND useRouter() causing "Error: NextRouter not mounted" and "Error: invariant expected app router to be mounted" errors

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related