Программируемое основанное на маршруте разделение кода

Question

Я не уверен, возможно ли программно применить расщепление кода на основе маршрута.

Я хотел бы импортировать его один раз ...

// normal version => I don't like importing twice
const LazyOtherComponent = React.lazy(() => import('./OtherComponent'));

// lazy version => I don't like importing twice
import OtherComponent from './OtherComponent';

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <section>
          { isRouteBasedSplittingActive ? LazyOtherComponent : OtherComponent; }
        </section>
      </Suspense>
    </div>
  );

Похоже, я хочуприменить ленивую загрузку I ЕСТЬ , чтобы сделать () => import('./OtherComponent') синтаксис ... это так?есть ли другой синтаксис?

Answer 1

Я думаю, что вы можете вернуть различные компоненты на основе isRouteBasedSplittingActive значения, например

import OtherComponent from './OtherComponent';
const LazyOtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  if(isRouteBasedSplittingActive) {
    return (
      <div>
        <Suspense fallback={<div>Loading...</div>}>
          <section>
             <LazyOtherComponent />
          </section>
        </Suspense>
      </div>
     );
  } else {
     return (
      <div>
        <section>
           <OtherComponent />
        </section>
      </div>
     );
  }
}