Для этого нужно понимать как браузер начинает обход DOM по правилу css-селектора.
Он начинает разматывать ваш селектор начиная с правого края! .text .link * {...}
Вот в данном случае (т.к. стоит *) собирает ВООБЩЕ ВСЕ ноды в доме. Потом начинает применять к ним фильтр .link и только потом .text
Отсюда вывод - делайте целевые классы. Делайте селекторы хотя бы не на * а на тег, что так же ужасно, но чуть менее :)
Best practice - спрятать токен в httpOnly куке, чтоб js не мог его прочесть и авторизовываться просто через куку в хеадере запроса.
Можно вот тут почитать, к примеру https://habr.com/ru/company/ruvds/blog/512866/ (обратите внимание на комментарии)
В любом случае Вам необходимо завести через реакт контекст (к примеру) стор, доступный в любом месте приложения. Оборачиваете всё приложение в контекст провайдер, на первой странице (или при загрузке приложения) запрашиваете какие-либо данные с бэка (данные пользователя например, если авторизация через куку, либо получаете jwt-токен в ответ на ввод логина) сохраняете в переменную в контексте (isAuth например), а в целевом компоненте навигации используете эту переменную как условие выводить одно или другое. Можно вызывать useEffect(() => {какой-то код},[имя переменной]), который будет дергаться только когда "имя переменной" обновится...
Giorgos, все же это очень похоже на проблемы с производительностью. В данный момент мне такое даже попробовать негде, вот тут общее исследование похожих проблем https://danilin.biz/safari-css-transform-flicker.htm
Надо уменьшать нагрузку на ререндер.
Еще увидел transition: all 0.1s ease-in-out; на ссылках - отключите для пробы. Жаль не могу у себя воспроизвести проблему, но с похожим боролся. Это всё глюки рендера шрифтов при наложении эффектов
Giorgos, всё же советую прошерстить тему оригинал и выпилить хотя бы подгрузку лишних шрифтов, это точно стоит сделать. До нескольких мегабайт пустой нагрузки скинуть никогда не помешает.
I Phoenix I, тут проблема не в вордпрессе а в купленной (ну или еще какой) теме с ненужными свистелками/перделками поверх базового функционала. Те же кастомные шрифты...
Giorgos, у меня вопрос - раз уж есть компилированные стили, то почему бы не выпилить из боди базовый кастомный шрифт Playfair Display, который переопределяется поверх аж два раза, сначала стилями прямо в html а потом и в том же css? Не говоря о большом количестве копипасты с ненужными переопределениями атрибутов. На слабом процессоре этот перебор определяющих правил тоже может повлиять на дергание.
Чтобы избежать скачков рендера - можно попробовать на стиль ссылки докинуть transform: translate3d(0,0,0);
Для автора дизайна - отправить его на курсы повышения квалификации по дизайну рассылок :)
Если кровь из носу нужен шрифт - резать на растровые картинки. Тут еще веселье будет с отображением картинки как ссылки - можно неслабо геморроя словить.
Так же стоит учитывать, что пиксель-перфект в рассылках скорее всего будет недостижим, т.к. почтовые клиенты могут иметь свое собственное мнение, каким размером будет выведен текст.
Можно тут посмотреть советы по шрифтам для рассылок
Как вариант - спланируйте фиксированную сетку, определите количество ячеек, получаете плоский массив индексов (индекс равен номеру ячейки в сетке), рандомом выбираете индекс, у индекса будут координаты, которые просто по формуле считаются, написать не сложно.
Атрибут pointer-events: none; отрубает кучу всего на контейнере и всём что вложено. К примеру так можно отрубить скролл под курсором в области оверфлоу скролл или вообще на странице - элемент перестанет реагировать на наведение курсора полностью
Ссылку сразу не увидел (не знаю почему, извиняюсь)
Мерцание заметил только если навожу на правый нижний желтый квадрат и начинаю с него уводить вверх мышку. Получаем ровно то что я и описывал ранее, только чуть иначе. Я увожу вверх, кваждрат начинает двигаться по диагонали и попадает под курсор. Профит. Квадрат принадлежит родителю на котором ховер, соответственно ховер на него, как на потомка, так же распространяется. Съехал, поймал ховер, заработала обратная анимация. Откатился на состояние для ховера, курсор потерялся, поехали обратно. Всё ж просто.
Все что выше написали (даже супер залайканный ответ) - фигня более чем на 200%
Для реализации в одно рыло - рецепта нет. Можно знать всё что требуется, но вот проф выгорание, переутомление никто не отменял. Даже если вы всё знаете - тянуть лямку полного сайта под ключ (это если сюда еще и СЕО включить, к примеру) - убьет вас за один-два года.
Думаю, надо бы еще определение, что значит "сайт под ключ" - дизайн с админкой? подключение к 1С с бухгалтерией чтоб совершать покупки? Контракты с техписами?
Примитивный термин, не имеющий к реальности никакого отношения.
wakenbyWork, если использовать супермодные экспериментальные фичи - надо очень внимательно и вдумчиво почитать про graceful degradation и согласовывать это с заказчиком.
А я поддержу 0xD34F, просто бесит сложившееся положение дел, когда супермегакрутые фронт-разработчики, которые и функциональщину и хуки-дрюки, а разобраться как строит браузер поток - выше их понимания. Ну и нахрена такие спецы? Какой реакт, если такие верстать не умеют? Жаль эпоха ie6 канула в лету и все расслабились.
Напоследок совет - прежде чем подключать флекс 10 раз подумайте как сделать то же самое без него. Флекс технология с подвохом. Особенно когда его разворачивают по вертикали.
Он начинает разматывать ваш селектор начиная с правого края!
.text .link * {...}
Вот в данном случае (т.к. стоит *) собирает ВООБЩЕ ВСЕ ноды в доме. Потом начинает применять к ним фильтр .link и только потом .text
Отсюда вывод - делайте целевые классы. Делайте селекторы хотя бы не на * а на тег, что так же ужасно, но чуть менее :)