状態に基づいて動的なReactルートコンポーネントを作成する

Question

私はwebappを作成していますが、フロントエンドには複数の「specs」があります。その数はバックエンドデータベースからの応答によって決定されます。私が望むのは、各仕様のリアクト・ルートを作成することです。バックエンドデータベースにいくつかの仕様を追加すると、動的にこれをやりたいのですが、フロントエンドにハードコードされたルートを追加する必要はありません。

私はReact/ReduxラッパーとしてJumpsuitを使用しています。仕様については、私はバックエンドに照会し、仕様の配列を状態で保存します。しかし、私はこのスペック配列を各ステートごとに1つのルートに基づいて動的に作成しようとすると、問題のない状態からこのスペア配列を得ることができます。

以下は私のコードです（マイナスインポート）。現時点では、私はちょうどいくつかの単語をレンダリングする非常に単純なコンポーネント、同じ 'スペック'コンポーネント、それぞれの動的ルートを与えることを試みた。クリックするとこれらのルートにナビゲートするボタンをいくつか作成しましたが、それらをクリックするとURLは正しいルートに変更されますが、ページはまったく変更されません。そして、私のメインコンポーネントの小道具をコンソールに印刷してルートを見ると、そこにはない動的なものが見えます。私はコンソールエラーを取得していません。

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 
})) 

わからない私はこのことについて、すべての間違った方法をつもりですが、どのように私は状態配列の各値のためのルートコンポーネントを作成するのですか？

Answer 1

各仕様のルートを作成する代わりに、実際には動的ルートを使用して、仕様を動的にレンダリングできるラッパーコンポーネントを作成することができます。ラッパーはdivタグだけでなく、非常に小さなことを行うことができます。それは、ブログのページのように、記事の内容を除いてすべてがスタイリングされたかなりのテンプレートになります。これはあなたのスペックのそれぞれが今、我々はルートを見て

で、次にスペックコンポーネントでは、あなたが

のようなものを行うことができます

<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> 

のようなものに単純化することができるか異なるによって異なります

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

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