NextJS 后退/前进按钮在 Instagram 内联 Safari 中不起作用

Question

我有一个使用 NextJS 的网站，其中所有链接都next/link用于路由。但是，当我通过 Instagram inframe Safari 访问该网站时，后退/前进按钮不适用于路由。它们是灰色的，就像我没有点击链接一样。

我试过使用

<Link href={blablabla} passHref>
   <a>
      {content}
   </a>
</Link>

但这并不能解决问题。关于方法的任何想法？

Answer 1

您能否提供已部署站点的链接或一些附加代码以获取更多上下文？根据您的问题，您可以尝试以下混合方法：

import Link from 'next/link';
import { useRouter } from 'next/router';

//...
    const slug: string = 'example';
    const router = useRouter();
    // use z-index to ensure clickable link is in very front of z-axis
    // router.push('/instagram/[slug]', `instagram/${slug}`, {...}) === (href, as, { options })
    const example = (
        <div>
            <Link
                href='/instagram/[slug]'
                as={`/instagram/${slug}`}
                shallow={true}
                prefetch={true}
                passHref={true}
                scroll={true}
            >
                <a
                    className='z-150 group-hover:bg-opacity-90'
                    id={'troublesome link'}
                    onClick={() =>
                        router.push('/instagram/[slug]', `/instagram/${slug}`, {
                            shallow: true,
                            locale: 'en-US',
                            scroll: true
                        })
                    }
                >
                    <span className='sr-only'>
                        the larr and rarr notation below === left arrow and right
                        arrow, respectively. This text won't be visible on the DOM,
                        only for the screen reader
                    </span>
                    <p>&larr;&nbsp;&rarr;</p>
                </a>
            </Link>
        </div>
    );
    console.log(
        `${
            (example.props,
            example.key,
            example.type ?? 'example not yet rendered or error')
        } `
    );
    //...

注意：浅层路由仅在同一页面上托管的内容之间导航时才有效（甚至 [...slug].tsx catch-all 路由）

如果是这种情况，我绝对建议使用浅渲染

另一个想法是让所有活动链接变成明亮的颜色，以测试它们在特定的 DOM 环境中是否确实处于活动状态（aria-active）。使用 ping 之类的动画来查看aria-current克隆是否在 DOM 中发光。

import Link from 'next/link';
import { useRouter } from 'next/router';
import React, {
    FC,
    JSXElementConstructor,
    ReactElement
} from 'react';
import css from '../Button/button.module.css'

export const NavLink: FC = (children, href: string) => {
    const child = React.Children.only(
        children as ReactElement<
            { 'aria-current': string | null },
            string | JSXElementConstructor<any>
        >
    );
    const router = useRouter();
    const AriaCurrentCloneElement = (
        <Link href={href}>
            {React.cloneElement(child, {
                'aria-current': router.pathname === href ? 'page' : null
            })}
        </Link>
    );
    return <div className={css.clone}>{AriaCurrentCloneElement}</div>;
};

对应的css类clone如下：

import Link from 'next/link';
import { useRouter } from 'next/router';

//...
    const slug: string = 'example';
    const router = useRouter();
    // use z-index to ensure clickable link is in very front of z-axis
    // router.push('/instagram/[slug]', `instagram/${slug}`, {...}) === (href, as, { options })
    const example = (
        <div>
            <Link
                href='/instagram/[slug]'
                as={`/instagram/${slug}`}
                shallow={true}
                prefetch={true}
                passHref={true}
                scroll={true}
            >
                <a
                    className='z-150 group-hover:bg-opacity-90'
                    id={'troublesome link'}
                    onClick={() =>
                        router.push('/instagram/[slug]', `/instagram/${slug}`, {
                            shallow: true,
                            locale: 'en-US',
                            scroll: true
                        })
                    }
                >
                    <span className='sr-only'>
                        the larr and rarr notation below === left arrow and right
                        arrow, respectively. This text won't be visible on the DOM,
                        only for the screen reader
                    </span>
                    <p>&larr;&nbsp;&rarr;</p>
                </a>
            </Link>
        </div>
    );
    console.log(
        `${
            (example.props,
            example.key,
            example.type ?? 'example not yet rendered or error')
        } `
    );
    //...