Is it possible to wait for useRouter().push() in NextJS 14?
It was possible in previous versions, but .push() no longer returns a promise, so this method doesn't work.

I have a one-page website, with some scrollTo links in the header, but my problem is that these links don't work when I'm on a subpage like .../subpage

So I have to redirect to the home page and then scroll to the element.

Another option would be to use the id in the .push method router.push(`/${target}`), but I don't want the id to be displayed in the url.

Is there a new method or a workaround?

Here's my component:

"use client"

import { useRouter, usePathname } from 'next/navigation'

export default function () {

    const router = useRouter()
    const pathname = usePathname()

    const scrollToPage = async (target: string) => {

        if (pathname === '/') {
            document.getElementById(target)?.scrollIntoView({ behavior: 'smooth' })
        } else {
            await router.push('/')
            document.getElementById(target)?.scrollIntoView({ behavior: 'smooth' })
        }
    };

    return (
        <header>
            <nav>
                <ul>
                    <li onClick={() => scrollToPage('element1')}>Element 1</li>
                    <li onClick={() => scrollToPage('element2')}>Element 2</li>
                </ul>
            </nav>
        </header >
    );
}