Pull to refresh

Comments 16

Я ничего не понял. Вы взяли react-router и не додумавшись написать обычный конфиг приступили к поиску другой библиотеки. Это действительно странно.

Допустим у нас есть страница статистики с 10-ю параметрами и 15 ссылок на эту страницу, разбросанные по всему проекту. Можете помочь написать конфиг так, что новый человек в проекте мог поменять публичный адрес страницы статистики в одном месте?

подозреваю, имелось в виду что-то типа такого:

<Link to={routes.netflix.path}>Netflix</Link>

соответственно, если вам нужно поменять адрес страницы, то меняете его в том месте, где задаётся этот самый routes
Допустим. А куда деть 10 параметров?
Дополню — желательно это делать строковым enum в тайпскрипт и получить дополнительно проверку от компилятора на опечатки. Что касается 10 параметров — вам не надо пробрасывать в компоненту что либо от роутера, это неправильно. Правильно использовать в роутере метод render и все переменные с match пробрасывать в пропсы. Тогда ваши компоненты ничего не будут знать о роутере и это хорошо. А вот как систематизировать перенос 20-ти параметров — надо было просто написать HoC компоненту, ей скармливать вашу компоненты а результат скармливать render-у роутера. Собственно все.
Да, я понял. Речь идет о формировании ссылки а не ее парсинге. Тут как удобнее — в Link все равно надо знать о том что параметры существуют, можно в конфиге хранить шаблон, в линке его заполнять, можно линк завернуть в компоненту и передавать ей параметрами в пропсах, может есть еще другие пути — надо смотреть на правила формирования ссылок если они есть.
Мы на проекте пользуемся генерацией ссылок с помощью функций
<Link to={routes.netflix.path(/* 10 парметров */)}>Netflix</Link>
Ну это вопрос на вакансию джуна. Либо формировать с помощью шаблонной строки харкордно, либо написать свой кастомный Link. Если не поленится и открыть доки, то там в каждом примере показывают как сделать что-то кастомное. Тема настолько старая, что даже удивительно увидеть её на хабре, да ещё не от джуна, который хочет на фрилансим бесплатный месяц получить. Хотя может вы этого и добиваетесь?)
Я ничего не понял. Вы взяли react-router и не додумавшись написать обычный конфиг приступили к поиску другой библиотеки. Это действительно странно.

У конфига для реакт-роутера есть пачка минусов в добавок к минусам самого реакт-роутера (хотя казалось бы куда уж больше):

  • роуты рендерятся (роуты рендерятся?? в карбюраторе конденсат!) только через Switch (renderRoutes просто превращает ваш «конфиг» в набор Route-компонентов внутри Switch)
  • и так как реально реакт-роутер-конфиг — это тот же реакт-роутер, то в плане редиректов ничего нового не появилось, редиректы по-прежнему работают только через компонент Redirect. Вот прям в «конфиг» надо взять и запихать отрендеренный реакт-элемент.
  • рендер вложенных роутов: вы получаете вложенные роуты и в компоненте сами их рендерите через всё тот же самый renderRoutes
  • различное поведение withRouter и react-router-config при разборе параметров: github.com/ReactTraining/react-router/issues/5662#issuecomment-339885205


И самое главное: ваше представление больше не является функцией от состояния, а наоборот управляет состоянием. В статье How to decouple state and UI всё прекрасно расписал Michel Weststrate.

Всё это крайне расстраивает. Так получилось, что не использовал react-router и успешно его избегал, но на новом проекте он уже был. В конце концов меня очень расстраивает подход, когда инструменты, созданные для рендера (реакт-компоненты) используются для сайд-эффектов. Да, мы в итоге пришли и к react-router-config, и к кастомным Link, и к кастомным Redirect… но зачем весь этот ужас, если уже есть более удобные инструменты, как например описанный в этой статье router5.
router5 — это Ваш выбор и наверное обоснованный. Я сам был в свое время немного в шоке от react-router версий с 1 по 3-ю. И вряд ли бы рискнул использовать их в развернутом проекте. С версии 4 react-router стал наконец более мощным и гибким. Основное преимущество react-router я нахожу в декларативном подходе к всприятию роутов, которое само по себе удобно при разработке компонентов и очень хорошо сочетается с декларативным подходом при работе со стором без redux (см. habr.com/post/358942) средствами graphql/apollo. Особенно это удобно при разработке изоморфных приложений. (Кстати в rooter5 был пример с универсальным приложением но сейчас его нет — наверное не все там у них гладко получается)

Конечно немного не хватает именованых роутов. Но в конце концов их можно добавить через простые объекты.
А как вы видите организацию именованых роутов через объекты? У нас есть проекты с apollo и react-router@4, и я думаю ребятам было бы интересно ваше виденье.
Я имел в виду самый простой вариант:

import r from './myRoutes'
<Layout>
      <Switch>
        <Route exact path='/' component={ AllUsers } />
        <Route exact path=`/${r.posts}` component={ TopPosts } />
        <Route exact path='/${r.posts}/:postId' component={ Post } />
        <Route exact path='/${r.user}/:userId' component={ NewPost } />
      </Switch>
</Layout>

Мы думали сделать фабрики для генерации path для Route и to для Link. Но это как раз тот момент, когда начинаешь задумываться, что ты делаешь что то не то и должно быть решение проще. В конце конов react-router — это очень популярная библиотека, которой пользуются миллионы людей по всему миру. Как они живут с этим?

Тот случай, когда миллионы леммингов ошибаются. А я пока только мечтаю сбросить груз react-router (так получилось, что он уже был в проекте).

Спасибо за описание router5. Из первых строк и названия ожидал какое-то сравнение роутеров. Вы сравнивали router5 с universal-router или с director?

Director изменялся последний раз в феврале 2015.
Universal-router скорее всего не внимательно изучил, поэтому пропустил. Пересмотрев описание, попробую написать тестовое приложение с universal-router, если будет время.

Sign up to leave a comment.