реагировать на множественные раскладки (корни маршрута) с помощью простых линий

Question

Я пытаюсь использовать plainroutes, чтобы создать профиль реактивного маршрутизатора. Я не уверен, что plainroutes - это самый читаемый способ написания кода, но я стараюсь дать ему справедливый снимок, так как все в восторге от этого. У меня очень тяжелое время, пытаясь определить несколько макетов для моих компонентов. Возьмем следующий рабочий код:

РАБОЧЕМУ plainroutes пример

export const createRoutes = (store) => ({ 
    path  : '/', 
    component : CoreLayout, 
    childRoutes : [ 
    LoginView(store), 
    SignupView(store), 
    Activate(store), 
    ForgotPw(store), 
    ConfirmReset(store) 
    ] 
} 
) 

Ничего неожиданного здесь происходит. Фактические маршруты встроены в вид, используя следующую структуру (например, LoginView):

Справочника Структуры childRoute объекты

-/Login 
--index.js 
--/components 
--Loginview.jsx 
--Loginview.scss 

В index.js файлов содержат небольшие маршрутные блоки выглядящих так:

Пример childroute

export default (store) => ({ 
    path : 'activate', 
    component: ActivateView 
}) 

Я также включу источник нижеуказанного компонента Login, как указано выше. Обратите внимание, что я попытался добавить path: 'login' к этому компоненту, но это не имело значения.

Войти импорт

export default { 
    component: LoginView 
} 

Когда пользователь посещает /login они видят компонент входа в систему. Легко ли? Ага. Теперь вы можете заметить, что все эти маршруты выглядят как группа представлений, связанных с проверкой подлинности. Я хочу, чтобы эти представления отображали макет. В этом случае CoreLayout. Это также работает с вышеуказанным кодом.

Следующим шагом является то, что я хочу добавить панель управления пользователя после входа в систему. Эта приборная панель должна использовать другой макет, который я называю LoggedIn. Естественно, я ожидал, что добавление другого объекта JSON с подобным рисунком может сделать это, так что я произвел следующий код:

неработающей множественной раскладку попытку

export const createRoutes = (store) => ({ 
    path  : '/login', 
    component : CoreLayout, 
    indexRoute : Login, 
    childRoutes : [ 
    SignupView(store), 
    Activate(store), 
    ForgotPw(store), 
    ConfirmReset(store) 
    ] 
}, 
    { 
    path  : '/', 
    component : LoggedIn, 
    indexRoute : Home, 
    childRoutes : [ 
    ] 
    } 
) 

Приведенных выше код не работает должным образом. Единственный путь, который работает, это пути во втором элементе набора (тот, который имеет маршрут /). Я попытался переместить некоторые маршруты из первого элемента вниз, а работа сделана, когда поместилась во второй элемент ... но это, очевидно, не решает мою проблему.

Самая неприятная вещь для меня заключается в том, что мне кажется, что я слежу за сообщениями SO, которые касаются этого, хотя его немного сложно сказать наверняка, потому что они не используют plainroutes. Я связываю один here для справки.

Answer 1

Ввод текста на самом деле помог мне справиться с этой проблемой. Ничего похожего на хорошую резиновую утку. Похоже, я неправильно понял природу объекта маршрутизатора. По-видимому, это должен быть законный объект, где у меня создалось впечатление, что он принимает коллекцию. Таким образом, вам нужно определить все в рамках одного родителя.Ниже приведено описание того, как я решил это для моего конкретного примера:

export const createRoutes = (store) => (
    { 
    path  : '/', 
    component : CoreLayout, 
    indexRoute : Home, 
    childRoutes : [ 
     { 
     path  : '/', 
     component : AuthLayout, 
     childRoutes : [ 
      LoginView(store), 
      SignupView(store), 
      Activate(store), 
      ForgotPw(store), 
      ConfirmReset(store) 
     ] 
     }, 
     { 
     path  : '/admin', 
     component : LoggedIn, 
     indexRoute : Home, 
     childRoutes : [ 
     ] 
     } 
    ] 
    } 

)