Блог

У меня есть веб-сайт, использующий NextJS, на котором все ссылки используются next/link для маршрутизации. Однако, когда я посещаю веб-сайт через Instagram в Safari, кнопки «назад» / «вперед» не работают для маршрутизации. Они серые, как будто я не нажимал на ссылку.

Я пробовал использовать

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

Но это не решает проблему. Есть какие-нибудь мысли по поводу подхода?

Я тоже столкнулся с этой проблемой.

Я решил не использовать следующую ссылку в браузере в приложении Instagram.

 const link = (
  <a href={href} target={target} rel={rel}>
    {children}
  </a>
);

// for browser in Instagram app (not working browser back on NextLink)
if (!navigator.userAgent.includes('Instagram')) return <NextLink href={href}>{link}</NextLink>;

return link;
 

Не могли бы вы предоставить ссылку на развернутый сайт или какой-либо дополнительный код для более подробного контекста? Исходя из вашей проблемы, вы можете попробовать гибридный подход следующим образом:

 
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>amp;larr;amp;nbsp;amp;rarr;</p>
                </a>
            </Link>
        </div>
    );
    console.log(
        `${
            (example.props,
            example.key,
            example.type ?? 'example not yet rendered or error')
        } `
    );
    //...

 

Примечание: Неглубокая маршрутизация работает только в том случае, если она перемещается между контентом, размещенным на одной странице (даже […slug].tsx-все маршруты)

если это так, я определенно рекомендую использовать неглубокую визуализацию

Другая идея состоит в том, чтобы сделать все активные ссылки ярким цветом, чтобы проверить, действительно ли они активны (aria-активны) или нет в этой конкретной среде DOM. Используйте анимацию, такую как 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, выглядит следующим образом:

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