基於狀態創建動態的React Route組件

Question

我正在創建一個webapp，我將在前端有多個「規格」，其數量是通過來自後端數據庫的響應來確定的。我想要的是爲每個規範創建一個React Route。我想動態地做到這一點，這樣，如果我在後端數據庫中添加更多規格，那麼我將不必在前端添加一堆硬編碼路由來匹配。

我使用連身褲作爲React/Redux包裝。對於規格，我查詢後端並將規格存儲在狀態數組中。然而，如果我嘗試根據這個spec數組動態地創建路由，那麼我可以從狀態獲得這個spec數組，但是它不會創建它們。

下面是我的代碼（減去導入）。此刻，我只是試圖給每個動態路由指定相同的「Spec」組件，只是一個非常簡單的組件，它會呈現幾個字。我創建了一些按鈕，可以在點擊時導航到這些路線，但是當我點擊它們時，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 /> 
    } 
    } 
}