Блог

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

React.lazy() делает именно то, что я хочу, но по какой-то причине это работает только в том случае, если я определяю свой путь к модулю как фактическую строку:

 const SideNav = React.lazy(() =>
  import("./navigation/concepts") // this is fine
);
 

Тем не менее, я бы очень хотел сделать эту динамику динамичной, чтобы я мог определить карту маршрутов к местоположениям модулей как таковую:

 const module_map = {"/docs/concepts" : "./navigation/concepts"};
    
console.log(module_map[this.props.location.pathname] === "./navigation/concepts"); // Just for sanity: this print 'true'
    
const SideNav = React.lazy(() =>
  import(module_map[this.props.location.pathname])
);
 

Это приводит к ошибке:

 Error: Cannot find module './navigation/concepts'
 

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

Есть какие-нибудь идеи, почему это происходит и как я могу это решить?

используйте __dirname вместо использования относительных путей.

 import React, { lazy, Suspense } from "react";

const file = `${__dirname}/components/MyComponent`;

const MyComponent = lazy(() => import(file));
export default function App() {
  return (
    <Suspense fallback="Loading">
        <MyComponent />
    </Suspense>
  );
}
 

codesandbox