08.05.2018 12:31
maxfarseer 18 2000 Источник

Когда react-router 4 только появился, многие переживали по двум поводам:


  • Как вынести роуты в отдельный файл (конфиг роутов)
  • Как теперь жить без onEnter хука.

В видео от Tyler McGinnis'a освещен первый вопрос.



А чтобы запретить доступ к какому-то из разделов вашего сайта, можно воспользоваться Redirect компонентом в связке с условием проверки. Пример здесь.

Комментарии (18)


  1. k12th
    08.05.2018 15:50
    #11337070

    По-моему, react-router — сама по себе веская причина отказаться от React в пользу Vue.


    1. Hitman333
      08.05.2018 17:16
      #11337250

      там типа лучше?)


      1. k12th
        08.05.2018 17:37
        #11337304
        +1

        Без импортов, подключения в фреймворк и т.д.


        Дока react-router 4
        const routes = [
  {
    path: "/sandwiches",
    component: Sandwiches
  },
  {
    path: "/tacos",
    component: Tacos,
    routes: [
      {
        path: "/tacos/bus",
        component: Bus
      },
      {
        path: "/tacos/cart",
        component: Cart
      }
    ]
  }
];

// wrap <Route> and use this everywhere instead, then when
// sub routes are added to any route it'll work
const RouteWithSubRoutes = route => (
  <Route
    path={route.path}
    render={props => (
      // pass the sub-routes down to keep nesting
      <route.component {...props} routes={route.routes} />
    )}
  />
);

// ...

{routes.map((route, i) => <RouteWithSubRoutes key={i} {...route} />)}


        1. apapacy
          09.05.2018 00:34
          #11337934

          Роутер реакта до 4-й версии действительно был малофнукционален и неудобен.
          В 4-й версии он немного непривычен для тех кто ожидает в роуте видеть действие.
          Роутер версии 4 это аналог тэга <IF>, <SWITCH> в других фреймверках. Это позвояет строить очень гибкие решения. Т.к. роут задает не только поведение того компонента который записан в его определении ({ path: "/sandwiches", component: Sandwiches }). Но также вы можете «показывать» или «скрывать» в роутах часть тэгов в починенных компонентах. Если только не искать в роутах императивных действий — сразу начинаешь предпочитать реактовские роуты другим реализациям (я кстати не говорю тут что-то против vue.js — это так на всякий случай).


          1. k12th
            09.05.2018 00:47
            #11337954

            Дык во vue-router то же самое. Только как-то проще и внятнее, но притом из коробки плюшек побольше. Например, можно влиять не только на подчиненные компоненты и дочерние роуты, а иметь несколько аутлетов в дереве приложения. До именованных роутов в react-router за 4 версии не додумались, в результате урлы в <Link/> надо либо писать руками (что чревато) или искать какую-то либу.


            не искать в роутах императивных действий

            А где вы встречали императивные роуты? Они везде более-менее декларативные, КМК.


            1. apapacy
              09.05.2018 12:30
              #11338326

              Классические веб приложения имели form action=******* которые использовались для сохранения например данных которые были императивный. Когда сейчас нв роуты вешают по привычке обработчики то это тоже императивный подход подразумевающий побочный эффект какой-то.


        1. justboris
          09.05.2018 10:00
          #11338184

          В доке react-router показывается четыре роута вместо двух. Плюс больше переносов строк.


          Складывается ощущение, что тут пытаются манипулировать фактами...


  1. FoterIS
    08.05.2018 17:16
    #11337252
    +2

    Смысл от таких коротких постов? Видео можно и самим найти на Youtub, а документация у
    react-router4 и так довольно хорошая.


    1. maxfarseer Автор
      08.05.2018 17:16
      #11337254
      -1

      Смысл в переводе.


      1. bano-notit
        09.05.2018 00:41
        #11337946

        Там был перевод? Что-то не заметил… Или вы про субтитры, которые так же находятся на ютубе и никакого отношения к хабру не имеют?


        1. apapacy
          09.05.2018 01:21
          #11337982

          Ну, нормально. Автор сделал на своем канале перевод с субтитрами и еще отгребает за это. Куда катится этот мир.


        1. maxfarseer Автор
          09.05.2018 07:07
          #11338104

          В заголовке написано (субтитры). Они были созданы человеком, подогнаны по времени для удобного чтения и добавлены к видео. Оригинальное видео не содержит даже англ. субтитров сделанных человеком. В публикациях есть и другие подобные посты, там к счастью, нет такого недовольства.


          1. bano-notit
            09.05.2018 16:01
            #11338560

            Прикол в том, что хабр — текстовый ресурс, а не коллекция ссылочек на ютуб. Есть на нём та же HTML Academy, которые сами делают туториалы и выкладывают их на ютуб. Вот только они при этом пишут туториал и на хабр, в конце прикрепляя видео с тем же контентом, но на другом ресурсе. Так же и Яндекс выкладывает тут видео-доклады со своих конференций, только сразу под видео есть расшифровка в виде текста, вместе со слайдами.


            Да, много кто просто берёт и работает над чужим видео, но он делает из этого статью хоть какую-то. Тут же просто "ребята, смотрите какой я молодец".


            Не, конечно перевод, подгонка по времени и всё остальное — дело реально трудное, я знаю. И я уважаю человека, который сделал эту работу. Но на хабр то выкладывать нужно статьи, а не рекламу своего дейтища. $mol рекламируется во все свои дыркифичи статьями! Все инструменты, сделанные хабровчанами, описываются: описывается проблема, описываются уже готовые решения и только в конце даётся ссылка на GitHub.


            Так что ИМХО, это просто заметочка "во как я умею!" Никакой пользы именно для хабра не имеющая. Я мог бы это видео найти и просто в ютубе, зачем хабр напрягать и отнимать у людей внимание от других СТАТЕЙ, а не таких заметочек?


            1. maxfarseer Автор
              09.05.2018 16:28
              #11338610

              Хабр — это площадка, где люди делятся знаниями. 21 человек добавил статью в закладки, значит как минимум им это оказалось полезно. Так же люди по-прежнему, голосуют за посты, но с этим сложнее, так как требуется карма. Однако, и тут выплыли в плюс (с трудом, кхе-кхе). Для часового перевода по React Native был сделан конспект. Здесь конспект делать неуместно.

              Никакой пользы именно для хабра не имеющая

              Плюсы за статью и закладки — говорят о том, что кому-то все же польза была. Поэтому, я продолжу работать для этих людей, пока динамика будет положительной.

              p.s. спасибо за обратную связь


  1. rtraced
    09.05.2018 07:04
    #11338102
    +1

    Перевод крутой, но…
    В таком формате видео усваивается хуже. Было бы классно сделать перевод в текстовом формате полностью. Чтобы можно было почитать и т.д. Думаю, ты понял, о чём я.
    А касательно содержания, мне кажется, что делать в таком конфиг-файле вложенные роуты не очень удобно. Делаю роуты не в виде массива, а в виде объекта, где ключами являются имена роутов. Потом экспортирую и в итоге можно составлять роут по формату:


    <Route {...routes.thisRouteName}/>

    С динамическими параметрами не очень, но для меня лично такой вариант удобнее.


    1. maxfarseer Автор
      09.05.2018 07:14
      #11338108

      Про усвоение — это на любителя. Согласен, это не так удобно, чем если бы был голосовой перевод. Но в целом, определенным группам людей (кто чаще учится по видео) это нравится, поэтому такую аудиторию терять не хочется. К тому же, кто-то включает субтитры только в определенных местах и это так же повышает лояльность к нашему делу.
      Переводы текстовые делаем, но обычно уже не выкладываем на хабр.


      1. VolCh
        09.05.2018 10:20
        #11338208

        Просто к посту можно добавить текст титров под спойлер. От этого аудитория не потеряется


        1. maxfarseer Автор
          09.05.2018 11:02
          #11338236

          эм… там не удобно, вот посмотрите на пример. Если вы не против помочь сделать из сабов статью с абзацами, то напишите в личку, я вышлю вам полный файл и укажу вас (по желанию) в статье.