#react_router — Public Fediverse posts

Навигация без хаоса: архитектура маршрутов в масштабируемом TypeScript-проекте

Нам важно, чтобы поддержка пользователей была на высоком уровне, поэтому у нас есть десятки сервисов для организации обучения специалистов поддержки. Я работаю над одним из таких проектов. Он активно развивается: ежемесячно добавляем более 10 новых страниц — сейчас в проекте их больше 120. В статье расскажу, как мы поэтапно организовали хранение путей роутера и связали параметры страниц с компонентами их вёрстки. Такой подход помогает повысить читаемость кода, сокращает его дублирование и упрощает поддержку.

https://habr.com/ru/companies/tochka/articles/924208/

#react_router #typescript #фронтенд #frontend

[Перевод] Wake up Remix

На конференции React прошлым летом команда объявила , что Remix «уходит в спячку». К тому моменту Remix v2 стал настолько тонкой обёрткой над React Router, что между проектами возникло искусственное разделение. Чтобы упростить архитектуру фреймворка, команда перенесла код сборщика и серверного рантайма из Remix непосредственно в React Router v7, объединив всё лучшее из фреймворка в так называемый “framework mode” для роутера. Также было объявлено о планах добавить ограниченную поддержку React Server Components (RSC) в React Router. Эта работа была завершена: версия 7 была выпущена в ноябре прошлого года, а в конце мая была представлена предварительная поддержка RSC. Теперь разработчики, использовавшие Remix v1, v2 или более ранние версии React Router, могут рассчитывать на стабильную платформу с долгосрочной поддержкой. Теперь же, пришло время заняться Remix!

https://habr.com/ru/companies/first/articles/914804/

#react #reactjs #remix #react_router #javascript #framework #frontend

Typescript question: Where can I read/learn the basics of defining types? I'm trying to use react-router-dom module and need to understand how to define what's needed for routes.

I need to declare each route I guess? But how?

#Typescript #react #react_router

https://github.com/eklem/draw-at-work/blob/trunk/react/src/main.tsx

Динамические Breadcrumbs на React, React Router и Apollo GraphQL

Хлебные крошки - важнейшая часть навигации приложения. В классическом исполнении они отражают текущее положение пользователя в иерархии. А отображение названия карточки товара, статьи или любой другой сущности - это уже, как правило, задача компонента отвечающего за отображение самой сущности. Однако, все может оказаться не так просто. По каким-либо причинам дизайнер, заказчик или другая неведомая сила будет категорично настаивать, чтобы название отображалось именно в хлебных крошках. Как бы то ни было, задача есть и ее нужно закрыть. Поэтому я и расскажу, как я с ней справился, в надежде получить одобрение или более элегантное решение) Погнали!

https://habr.com/ru/articles/796579/

#react #react_router #breadcrumbs #хлебные_крошки #apollo #graphql #tanstack_query #antdesign