Dynamisch Routen erstellen mit React-Router

Question

Ich bin eine Anwendung erstellen, die vor dem Bootstrappen React eine API aufrufen wird. Diese API teilt mir mit, welche Funktionen ich basierend auf dem Abonnement des Benutzers laden muss.

Die API wird ein Array von Objekten mit den unter

links: [ 
    { 
     label: 'Payment Reconciliation', 
     component: './components/_paymentReconciliation/paymentReconciliationPage', 
     url: '/paymentreconciliation' 
    }, 
    { 
     label: 'Device Integration', 
     component: './components/_deviceIntegration/deviceIntegrationPage', 
     url: '/deviceintegration' 
    } 
] 

gegliederten Mustern zurückkehrt Es ist einfach genug, um die Links zu kartieren dynamischen Routes

export default function Routes() { 
    let featureRoutes = config.FEATURES.links.map((menuItem, i) => { 
     return (
      <Route path={menuItem.url} component={require(menuItem.component).default} key={i} /> 
     ) 
    }); 
    return (<div> 
     <Route exact path="/" component={LandingPage} /> 
     {featureRoutes} 
    </div> 
    ) 
} 

offensichtlich nicht funktioniert Dies herzustellen. Ich habe Mühe herauszufinden, wie man keine Import-Anweisung für jede mögliche Komponente benötigt, die geladen werden könnte. Sollte die API auch den Pfad zur Komponente oder nur den Komponentennamen zurückgeben? Ich habe Beispiele gesehen, die etwas wie handler={require(PathToComponent)} verwenden. Das hat sich auch nicht bewährt.

hier Jede Hilfe wäre

Answer 1

rendern. ES-Importe müssen statically analyzable sein, sodass Sie sie nicht dynamisch anfordern können. Stattdessen können Sie einen Commonjs Stil Import verwenden, um dynamisch-Dateien benötigen:

var myFile = require('myFile'); 

dass Kombinieren mit den route-config approach, und du bist fertig.

Sie können ein Beispiel dafür in der Dokumentation Modul dieses Plural natürlich sehen: Creating Reusable React Components

Answer 2

Versuchen erfordern Ihren Weg zu den Komponenten erkannt werden, auf diese Komponente einen Verweis zu erhalten.

Je nachdem, wie der react-router seine Komponentenfunktion implementiert hat, könnte dieser Code etwas abweichen. Sie können eine reaktionskomponente immer mit required unter React.createElement(require('./Component').default)