Erstellen Sie dynamische React Route-Komponenten basierend auf dem Status

Question

Ich erstelle eine Webapp und ich werde mehrere "Spezifikationen" im Frontend haben, deren Anzahl über eine Antwort von einer Backend-Datenbank bestimmt wird. Ich möchte eine React Route für jede Spezifikation erstellen. Ich möchte das dynamisch machen, wenn ich einige weitere Spezifikationen in der Backend-Datenbank hinzufüge, dann muss ich keine Reihe von fest codierten Routen im Frontend hinzufügen, um zu passen.

Ich verwende Jumpsuit als Reaktion/Redux-Wrapper. Für die Spezifikationen frage ich das Backend ab und speichere die Spezifikationen in einem Array im Zustand. Ich kann dieses Spezifikationsfeld aus dem Status "Keine Probleme" erhalten, wenn ich jedoch versuche, basierend auf diesem Spezifikationsfeld dynamisch Routen zu erstellen (eine Route für jede Spezifikation), dann erstellt es sie nicht.

Unten ist mein Code (minus Importe). Im Moment habe ich einfach versucht, jeder dynamischen Route die gleiche "Spec" -Komponente zu geben, nur eine sehr einfache Komponente, die ein paar Worte rendert. Ich habe einige Schaltflächen erstellt, die beim Klicken auf diese Routen navigieren, aber wenn ich auf sie klicke, ändert sich die URL in die richtige Route, aber die Seite ändert sich überhaupt nicht. Und wenn ich die Requisiten meiner Hauptkomponente auf die Konsole drucke und die Routen betrachte, kann ich sehen, dass die dynamischen nicht vorhanden sind. Ich bekomme keine Konsolenfehler.

export default Component({ 

    componentDidMount() { 
     // Check if the specs need to be loaded 
     if (this.props.specs.length == 0) { 
      axios.get('/getspecs') 
       .then((specs) => { 
        // Load specs into state 
        QuizList.loadSpecs(specs.data.facet_counts.facet_fields.spec.filter((val, i) => {return (i%2==0)})); 
       }) 
       .catch((error) => { 
        console.log(error); 
       }); 
     } 
    }, 

    loadSpecRoutes() { 
     // Loop through specs array in state and create route for each 
     return this.props.specs.map((spec, i) => { 
      return(
       <Route path={`/spec/${spec}`} component={Spec} /> 
      ); 
     }); 
    }, 

    render() { 
     return (
      <Router history={browserHistory}> 
       <Route path='/' component={App}> 
       <IndexRoute component={Home}/> 
       <Route path='/account' component={Account}/> 
       <Route path='/quizzes' component={QuizRoot}/> 
       {this.loadSpecRoutes()} <-- where I want to load routes 
       </Route> 
      </Router> 
     ); 
    } 
}, (state) => ({ 
    auth: state.user.auth, 
    specs: state.quizList.specs 
})) 

nicht sicher, ob ich gerade diesen ganzen falschen Weg gehen, aber wie erstelle ich eine Strecke Komponente für jeden Wert in einem Zustand Array?

Answer 1

Statt eine Route für jede Spezifikation zu erstellen, können Sie tatsächlich eine dynamische Routen verwenden und eine Wrapper-Komponenten erstellen, die Ihre spec dynamisch machen kann. Der Wrapper kann sehr wenig tun, sogar nur ein div-Tag. Oder es kann eine ziemlich Schablone sein, wie eine Blogseite, die alles außer dem Artikelinhalt gestylt hat. Dies hängt davon ab, wie unterschiedlich jeder Ihrer spec ist

Jetzt schauen wir auf die Strecke, kann es wie

<Router history={browserHistory}> 
    <Route path='/' component={App}> 
    <IndexRoute component={Home}/> 

    <Route path='/account' component={Account}/> 
    <Route path='/quizzes' component={QuizRoot}/> 
    <Route path='/specs/:spec' component={Spec} /> 
    </Route> 
</Router> 

Dann in der Spec Komponente zu etwas vereinfacht werden, können Sie Dinge wie

class Spec extends Component { 
    render() { 
    const {spec} = this.props.params 

    switch (spec) { 
     case 'spec1': 
     return <SpecTypeA /> 
     case 'spec2': 
     return <SpecTypeB /> 
     default: 
     return <GeneralSpec /> 
    } 
    } 
}