How to dynamically connect components in ReactJS?

Question

JavaScript

There is this code:

import React, {useState, useEffect} from 'react';
import { Container } from 'react-grid-system';

import Header from '../../ui/header';
import Footer from '../../ui/footer';

export default (props) => {
  const DynPage = require('./' + props.name);
  return(
    <div>
      <Header />
      <Container>
        <DynPage />
      </Container>
      <Footer />
    </div>
  )
}

This is the base, a few more effects will be added, but even in this state it does not function.
It writes this error:

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

From the code the idea is clear, but I will try to explain. I want to load "stupid" components from one component (index.js) that lie side by side. They are all identical, and they all need the same functionality, only the text changes. That is why I took out only the text in third-party files.
The code works if you execute import beforehand and then create something like ac. an array where all the components are listed, but it's very dirty, I would like it this way. In the future I will wrap it in try...catch
PS props.name is passed from the router, everything is ok with it

Answer 1

Code split

Answer 2

have you looked at react-loadable ?