title: Dynamically import component in React based on config entries
body: <p>I have multiple apps as part of one React-redux-typescript project. All of these individual apps are part of a core-application. I want to dynamically set up routing. </p>
  
  <p>My current routes look like this:</p>
  
  <p><strong>Routes.tsx</strong></p>
  
  <pre><code>import HomePageApp  from "../Components/Home/HomeApp";
  import TestApp from "../Components/Test/TestApp";
  export default function Routes() {
    return (
      &lt;Switch&gt;
          &lt;RedirectIfAuthenticated
          exact={true}
          isAuthenticated={true}
          path={Path.homePath} --&gt; "/"
          component={HomePage} ---&gt; AppName coming from import statement on top
          redirectPath={Path.homePath} --&gt;  "/"
          /&gt;
          &lt;RedirectIfAuthenticated
          isAuthenticated={true}
          path={Path.apps.test} --&gt; "/test"
          component={TestApp} --&gt; AppName from import on top
          redirectPath={Path.homePath} --&gt; "/"
          /&gt;
       &lt;/Switch&gt;
     );
  }
  </code></pre>
  
  <p>And RedirectIfAuthenticated simply redirects to correct applications' landing pages.</p>
  
  <p><strong>RedirectIfAuthenticated.tsx</strong></p>
  
  <pre><code>export default function RedirectIfAuthenticated({
      component,
      redirectPath,
      isAuthenticated,
      ...rest
  }: IRedirectIfAuthenticatedProps) {
      const Component = component;
      const render = (renderProps: RouteComponentProps&lt;any&gt;) =&gt; {
          let element = &lt;Component {...renderProps} /&gt;;
          return element;
      };
  
      return &lt;Route {...rest} render={render}/&gt;;
  }
  </code></pre>
  
  <p>I've a config file like this:</p>
  
  <p><strong>Manifest.ts</strong></p>
  
  <pre><code>export let manifest = {
    apps: [
      {
        componentPath: "/Test/App",
        path: "/test",
        name: "Test"
      },
     ...more objects for other apps
    ]
  };
  </code></pre>
  
  <p>In my Routes.tsx, I want to make use of my manifest to render the RedirectIfAuthenticated component.</p>
  
  <p>so I can figure out this change:</p>
  
  <p><em>for brevity showing the dirty approach but the actual code iterates over the manifest using .map and renders RedirectIfAutenticated.</em></p>
  
  <pre><code>const app = manifest.apps.find(app =&gt; app.name === "Test");
  &lt;Switch&gt;
    &lt;RedirectIfAuthenticated
    isAuthenticated={true}
    path={app.path} --&gt; "/test"
    component={What should I do here? How to pass component reference by path??} 
    redirectPath={"/"} ==&gt; I typically get this from my manifest..
    /&gt;
  &lt;/Switch&gt;
  </code></pre>
  
  <p>One option is to do this:</p>
  
  <pre><code>component={require("path from manifest").default}
  </code></pre>
  
  <p>but our tslint throws a bunch of errors at this. Other than this I can't figure out how to pass the component reference here dynamically. Looking for a better approach.</p>
  
  <p>The Routes.tsx needs to be dynamic so that adding new apps is a matter of configuration so I can't do imports on top because I dont know what's gonna be added in config. Thanks. </p>