Реагировать SSR динамически импортировать компоненты в соответствии с ответом API

Question

Я создаю приложение SSR React с помощью инструмента razzle. Сервер использует Express Framework. Я хотел бы загружать компоненты React динамически в соответствии со значением, включенным в ответ API.

У меня есть структура папок, такая как:

вид
- по умолчанию
- Home.js
- theme1
- Home.js

Я использую SSR. На сервере у меня

const markup = renderToString( 
<Provider store={store}> 
   <StaticRouter context={context} location={req.url}> 
      <App theme={theme} /> 
   </StaticRouter> 
</Provider> 
);

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

Должно ли это быть сделано на сервере экспрессом или есть другой способ?

Спасибо

Answer 1

Вы ищете что-то подобное? Я не совсем уверен, если вы используете рендеринг на стороне сервера.

import DefaultComponent from './views/default.js';
import Theme1Component from './views/theme1.js';

this.state = {
     visibleDefault: true
}

Затем вы можете просто обновить базу состояния в ответе.

Тогда в вашем рендере вы можете иметь это

render(){
    return(
       { visibleDefault ? <DefaultComponent/> : <Theme1Component/> }
    )
}