Почему не добавляются роуты?

Question

[Егор Жолнин]

По какой-то причине роут не добавляется в приложение

component.jsx

import { Route, Switch } from 'react-router-dom';

export default props => (
    <div className="App main-content">
            <Switch>
              {props.admin.routes.length
                ? props.admin.routes.map((route, i) => (
                    <Route
                      exact
                      key={i}
                      path={route.path}
                      component={route.component}
                    />
                  );
                )
                : null}
            </Switch>
    </div>
  );

props.admin.routes

тут все хорошо

react devTools

тут пусто

Т.е. в пропсах есть данные, но они почему-то не рендерятся. С чем это может быть связано?

В корне приложения есть BrowserRouter, с этим все нормально

Comments

[Роман Александрович]

props.admin.routes.length!==0

[Егор Жолнин]

Роман Александрович, Boolean([].length) === false

[Антон Спирин]

Егор Жолнин, вы где props.admin.routes выводите? Не факт, что в компонент передаете. Тернарка там вообще бессмыслена. Можно сразу мапить.
И props правильней так описывать:
const SomeComponent = ({ admin }) => (
А экспорт лучше в конце файла делать, чтобы компонент индексировался в IDE и React DevTools по имени.

[Егор Жолнин]

Антон Спирин, автоимпорт работает, тернарка нужна, если по какой-то причине не пришел admin - тогда будет routes is undefined и все поломается. props.admin.routes выводится внутри компонента, т.е.

export default props => {
  debugger
  return (
    <div className="App main-content">
    //...

P.S.
Соврал, автоимпорт не работает) но проблема не в нем

[Антон Спирин]

Егор Жолнин, у вас из-за того, что компонент без имени и в DevTools Undefined.

если по какой-то причине не пришел admin - тогда будет routes is undefined и все поломается

По-хорошему, пока admin не пришел, routes должен быть пустым массивом, тогда тернарка не понадобится.

Switch и не должен рендерить своих детей. Он перебирает их циклом до первого совпадения пути и если путь совпал рендерит текущий роут, а если совпадений не было, то и дочерних компонентов у него не будет.
Попробуйте просто перейти на один из полученных путей.

[Егор Жолнин]

Антон Спирин, при попытке перейти - белый экран

[Егор Жолнин]

Антон Спирин,

Switch и не должен рендерить своих детей.

[Антон Спирин]

Егор Жолнин, внимательней читаем, что я написал:

Switch и не должен рендерить своих детей. Он перебирает их циклом до первого совпадения пути и если путь совпал рендерит текущий роут, а если совпадений не было, то и дочерних компонентов у него не будет.

Без остального кода точно не скажешь, в чем проблема.

[Егор Жолнин]

Антон Спирин, тем не менее, белый экран в account/tickets )

[Антон Спирин]

Егор Жолнин, повторюсь, без остального кода точно не сказать, в чем проблема. Не ясно как вы получаете данные, не мутируете ли их, нужен ли вызов withRouter и тд. В примере древа из ReactDevTools видно, что код на самом деле отличается от вашего примера.

[Егор Жолнин]

Антон Спирин,
Как получаю данные:

/account

routes: ModuleRoute[] = [];
addRoute(route: ModuleRoute) {
    this.routes.push(route)
  }
constructor(app: IApp) {
    this.component = withProps({ admin: this })(AdminPanel);
    this.app = app;
    this.links = [];
    this.reducer = {
      name: 'accountPanel',
      reducer
    }
    this.app.addReducer(this.reducer)
    this.app.addRoute({path: '/', component: this.component, protectedRoute: false});
    this.app.addRoute({path: '/account', component: this.component, protectedRoute: false});
  }

/account/tickets

import TicketChoise from './Tickets';
export class ModuleTickets implements Module {
constructor(
    app: IApp,
    routeContainer: IRouteContainer,
    menuContainer: ISidebar
  ) {
    this.component = {
      choise: TicketChoise
    };
    this.reducer = {
      name: 'tickets',
      reducer
    };

    this.routeContainer = routeContainer;

     this.routeContainer.addRoute({
       path: '/account/tickets/choice',
       component: this.component.choise,
       protectedRoute: false
     });
    this.routeContainer.addRoute({
      path: '/account/tickets',
      component: this.component.choise,
      protectedRoute: false
    });
  }
}

index.ts - тут стартует весь проект

const moduleTickets = new ModuleTickets(app, moduleAccount);

Недостающая верстка - там нет логики, шапка и боковое меню

[Антон Спирин]

Егор Жолнин, объясните зачем вам весь этот модульный велосипед? Вы используете стороннюю библиотеку? И где код точки входа?

[Егор Жолнин]

Антон Спирин, насчет велосипеда - это долгая история)
Что имеется ввиду под точкой входа? ReactDOM.render()?

[Антон Спирин]

Егор Жолнин, да, это и есть точка входа. Но похоже еще и код Module нужен, так как хз, что там происходит.

[Егор Жолнин]

Антон Спирин, Module - это просто интерфейс

export interface Module {
  start(): void;
}

точка входа

const AppComponent = () => (
      <Provider store={this.store}>
        <ApolloProvider client={client}>
          <Router>
            <Switch>
              {this.routes.map((route: any, i: number) => {
                if (route.protectedRoute) {
                  return (
                    <AccessRoute
                      exact
                      key={i}
                      path={route.path}
                      component={route.component}
                    />
                  );
                }
                return (
                  <Route
                    exact
                    key={i}
                    path={route.path}
                    component={route.component}
                  />
                );
              })}
            </Switch>
          </Router>
        </ApolloProvider>
      </Provider>
    );

    ReactDOM.render(<AppComponent />, document.getElementById('root'));

[Антон Спирин]

Егор Жолнин, фигня какая-то. Похоже, что вы упростили код и потерялась вся суть.
1. Используете this в функциональном компоненте.
2. Используете props, но в него ничего не передается.
3. Модуль должен реализовать метод start, но в коде его нет.
4. Где и как используются ваши модули тоже не ясно.

Без этого всего не ясно как инициализируется ваше приложение и в чем может быть проблема.

[Егор Жолнин]

Антон Спирин, кода очень много, давайте я попробую основные моменты показать в CodeSandbox
Если какой-то информации будет недостаточно, я добавлю. Все сразу выложить не могу

[Антон Спирин]

Егор Жолнин, смотрите. Вы сначала инициализируете модуль App, который тут же отрисовывается и монтируется. Затем Account, который при старте даже вызывает store.dispatch и обновляет смонтированное древо компонентов.
Потом пропущенный Auth. И в конце Tickets. В start там ничего нет, routes обновляются простым мутированием и App не реагирует на изменения и не обновляется. То есть о роутах модуля Tickets, смонтированное приложение ничего не знает.

[Антон Спирин]

Егор Жолнин, вам, по-хорошему, свою модульную систему изменить, чтобы все происходило в два этапа:
1. Регистрация модулей
2. Рендер и монтирование к DOM.

[Егор Жолнин]

Антон Спирин, роуты добавляются в конструкторе. Когда стартует app, у него уже есть все роуты модулей. К тому же роут билетов вставляется не в app, а в account

[Антон Спирин]

Егор Жолнин, насчет конструктора моя невнимательность.
Смотрим:
Application:

export class Application implements IApp, IRouteContainer {
  routes: ModuleRoute[];  // хранилище роутов

  constructor() {
    this.routes = []; 
  }

  addRoute(route: ModuleRoute) {
    this.routes.push(route);
  }
}

export class ModuleAccount implements ISidebar, Module, IRouteContainer {
  routes: ModuleRoute[] = [];  // второе хранилище
  
  addRoutes(routes: ModuleRoute[]) {
    routes.map(route => this.routes.push(route));
  }

  addRoute(route: ModuleRoute) {
    this.routes.push(route);
  }

  constructor(app: IApp) {
    this.app = app;
    this.links = [];
     
    // тут вы пишите в первое
    this.app.addRoute({
      path: "/",
      component: this.component,
      protectedRoute: false
    });

    this.app.addRoute({
      path: "/account",
      component: this.component,
      protectedRoute: false
    });
  }
}

export class ModuleTickets implements Module {
  private app: IApp;
  private routeContainer: IRouteContainer;
  private menuContainer: ISidebar;

  constructor(
    app: IApp,
    routeContainer: IRouteContainer,
    menuContainer: ISidebar
  ) {
    this.app = app;
    this.routeContainer = routeContainer;

    // this.routeContainer.addRoute({
    //   path: '/account/tickets/choice',
    //   component: this.component.choise,
    //   protectedRoute: false
    // });
    
     // тут вы пишите во второе
    this.routeContainer.addRoute({
      path: "/account/tickets",
      component: this.component.choise,
      protectedRoute: false
    });
  }
}

const app = new Application();
const moduleAccount = new ModuleAccount(app);
// почему передаете moduleAccount?
const moduleTickets = new ModuleTickets(app, moduleAccount, moduleAccount);

Оставил только ключевые части. У вас роуты ModuleAccount пишутся в Application, А роуты ModuleTickets в ModuleAccount.

[Антон Спирин]

Егор Жолнин, тут надо сводить модули к одному API и отдельным шагом их собирать, рендерить и цеплять к DOM.

[Егор Жолнин]

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

app
└account
    └tickets

[Антон Спирин]

Егор Жолнин, ModuleAccount.routes похоже нигде не используется. А роуты ModuleTickets пишутся только туда.

[Егор Жолнин]

Антон Спирин, props.admin.routes - это ModuleAccount.routes

[Антон Спирин]

Егор Жолнин, мозайка понемногу складывается. Теперь нужен код AdminPanel

[Егор Жолнин]

Антон Спирин, AccountPanel?

[Антон Спирин]

Егор Жолнин, import AdminPanel from "./IndexComponent";

[Егор Жолнин]

Антон Спирин,
IndexComponent

import Component from './components';
import connect from './containers/connect';
import lifecycle from './containers/lifecycle';
import withHandlers from './containers/withHandlers';

import { compose } from 'ramda';

export default compose(
  connect,
  withHandlers,
  lifecycle
)(Component);

component

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import AccessRoute from '../../../../common/AccessRoute';
import NavBar from './NavBar';
import Header from './Header';
import { Col, Container, Row } from 'react-bootstrap';

export default props => {
  // debugger
  return (
    <div className="App main-content">
      <Header />
      <Container className="clearfix">
        <Col sm={3} md={3}>
          <NavBar list={props.data.menuList} />
        </Col>
        <Col sm={9} md={9} className="page-wrapper">
          <div className="page-content">
            <Switch>
              {props.admin.routes.length
                ? props.admin.routes.map((route, i) => {
                  if (route.protectedRoute) { //пока что всегда false
                    return (
                      <AccessRoute
                        key={i}
                        path={'/account/tickets'}
                        render={() => route.component}
                      />
                    );
                  }
                  return (
                    <Route
                      key={i}
                      path={'/account/tickets'}
                      render={() => route.component}
                    />
                  );
                })
                : null}
            </Switch>
          </div>
        </Col>
      </Container>
    </div>
  );
};

[Антон Спирин]

Егор Жолнин, по данному коду точно ошибка:

return (
  <Route
    key={i}
    path={'/account/tickets'}
    render={() => route.component} // тут
  />
);

Отдаете на рендер объект.

Можете еще такой вызов сделать:

return (console.log('route', route),
  <Route
    key={i} 
    path={'/account/tickets'}
    render={() => route.component}
  />
);

Убедиться, что они доходят до компонента.

[Егор Жолнин]

Антон Спирин, если поменять на

return (console.log('route', route),
  <Route
    key={i} 
    path={'/account/tickets'}
    component={route.component}
  />
);

то ничего не изменится

[Антон Спирин]

Егор Жолнин, в консоли, то что? Появились'route' { ... }?

[Егор Жолнин]

Антон Спирин, в account/ да
в account/tickets без изменений

[Антон Спирин]

Егор Жолнин, по симптомам роуты в Switch попадают. А вот при переходе на account/tickets, либо стоит exact на роуте для account, либо какие-нибудь ошибки при попытке отрисовать дочерний компонент. Хедер никуда не пропадает?

[Егор Жолнин]

Антон Спирин, пропадает. Вообще при переходе #root пустой

[Егор Жолнин]

Антон Спирин, заработало! убрал в корневых рутах exact и все заработало) Спасибо большое за помощь

[Антон Спирин]

Егор Жолнин, значит либо в корневом роутере нет совпадений, либо ошибка. В примерах у вас в AppComponent в Route не передается свойство exact. Оно точно не передается?
Как вариант если не передается посмотреть, что будет если заменить роуты Account на:

return (
  <Route
    key={i} 
    path={'/account/tickets'}
    render={() => <div>Test</div>}
  />
);

[Антон Спирин]

Егор Жолнин, ох стоило это в примерах показать. Так как я первым делом этот кейс проверил.)

[Егор Жолнин]

Антон Спирин, убрал exact, который находится в AppComponent

[Антон Спирин]

Егор Жолнин, я это понял. У вас в codesandbox в AppComponent это свойство не прописано. Поэтому, я и просил ваш настоящий код, а не упрощенные примеры, так как они могут не содержать причину, как в итоге и получилось.