reactjs - 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 包罗万象的路由)
如果是这种情况，我绝对建议使用浅渲染
另一个想法是将所有事件链接设为亮色，以测试它们在特定 DOM 环境中是否确实处于事件状态(aria-active)。使用类似 ping 的动画来查看 aria-current clone 在 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如下:

.clone {
    @apply flex justify-between;
    & a {
        @apply bg-current text-rojo-100 p-4 no-underline outline-none font-semibold;
        &:hover {
            @apply text-gray-900 duration-150 transition-colors ease-in-out transform-gpu;
        }
        &[aria-current] {
            @apply animate-slowPing font-bold text-lg text-rojo-300 transition-transform duration-300 ease-in-out;
        }
    }
}