Зачем мне вкладывать свои маршруты React?

Question

Мне сложно понять, почему я хочу вкладывать свои маршруты реакции через компоненты. В следующем примере у вас есть два компонента, распределенных по нескольким файлам.

Файл 1:

 <Route path='/topics' component={Topics} />

Файл 2:

    const Topics = ({ match }) => (
  <div>
    <h2>Topics</h2>
    <Link to={`${match.url}/exampleTopicId`}>
      Example topic
    </Link>
    <Route path={`${match.path}/:topicId`} component={Topic}/>
  </div>
) 

В настоящее время я создаю CRM для моя компания, где вместо этого я делаю это:

routes / index. js

         const routes = [
...
          { path: '/app/analytics/competitors', component: Competitors, meta: { title: 'Competitor Data', description: '' } },
          { path: '/app/analytics/competitors/:id', component: CompetitorById, meta: { title: 'Competitor Report', description: '' } }]
    export default routes

App. js:

  <Provider {...RootStore}>
    <Router history={RootStore.routerStore.history}>
      <Switch>
        {routes.map((route) => {
            return (
              <Route
                key={route.path}
                path={route.path}
                component={route.component}
                exact={true}
                meta={route.meta}
              />
            );
          }
        })}
      </Switch>
    </Router>
  </Provider>

Когда у вас есть десятки маршрутов, я считаю, что это намного проще читать, реализовывать и понимать, что происходит с моим маршрутизатором.

Это больше похоже на то, как я видел маршруты, реализованные в других фреймворках, таких как VueJS s Vue StoreFront.

Что-то не так с тем, что я здесь делаю, и если нет, то почему люди вкладывают свои маршруты?

Спасибо :)

Изменить:

Для дальнейшего расширения я использую следующие маршруты для всего, что требует авторизации:

            return (
              <AppRoute
                key={route.path}
                path={route.path}
                component={route.component}
                exact={true}
                meta={route.meta}
              />
            );

Этот именованный маршрут объявляется так:

const AppRoute = ({ ...props }) =>
  RootStore.userStore.hasSession ? (
    <Theme>
      <Route {...props} />
    </Theme>
  ) : (
    <Redirect to={"/login"} />
  );

Внутри темы у нас есть общие компоненты, которые используются на каждой странице, такие как панель навигации и h читатель. Это предотвращает повторную визуализацию, поэтому по сути каждый маршрут является контейнером, а не целой страницей.

Answer 1

Одной короткой, но важной причиной может быть повторный рендеринг.

Если у вас есть один рендеринг маршрута под /foo и один под /foo/:id, то React не потребуется повторно отрисовывать foo route compinent, даже когда вы переключаетесь с одного идентификатора на другой. Если вы их не вложите, все придется заново визуализировать.

Это дает еще больше преимуществ, если вы хотите добавить несколько простых правил, например, разрешить пользователям вводить /foo только тогда, когда они аутентифицирован. Вы можете добавить это правило в свой компонент маршрута /foo. Если пользователь аутентифицирован, контент отображается, а также становятся доступными все подмаршруты. Без вложенности вам нужно будет снова реализовать его в каждом маршруте.