React路由器：從Wordpress REST API動態創建頁面

我創建了一個從Wordpress REST API JSON對象中檢索的元素數組。我想使用react-router將每個元素作爲自己單獨的頁面，使用它的id作爲slug例如。（/項目/ 1）。React路由器：從Wordpress REST API動態創建頁面

我碰到了一堵牆，無法弄清楚如何使用react-router動態創建路由。任何指導將非常感謝！

export default class ItemContainer extends React.Component { 

    constructor(){ 
     super(); 
     this.state= { 
     items: [] 
     } 
    } 

    componentDidMount(){ 
     var th = this; 
     this.serverRequest = 
     axios.get('http://website.com/wp-json/wp/v2/item/') 
     .then(function(result) { 
      th.setState({ 
      officers: result.data 
     }); 
     }) 
    } 

    componentWillUnmount(){ 
     this.serverRequest.abort(); 
    } 


    render(){ 

     const ItemComponents = this.state.items.map((item) => { 
     return <Item key={item.id} {...item} />; 
     }); 


     return(
      <div className="item-wrapper"> 
      {ItemComponents} 
      </div> 
    ); 
    } 
}

來源

2017-02-21 Twhitt06

你可能要採取的方法是不創建每個項目的具體路線，並使用param代替。

你path可能是這個樣子：

<Route path="/items/:itemId" component={ItemPage} />

這將使你得到itemId在ItemPage組件和加載正確的內容。如果您獲得的ID不符合有效項目，請重定向至錯誤頁面或您喜歡的任何其他頁面。

您可以在ItemPage像道具訪問itemId PARAM：

this.props.params.itemId

如果你真的覺得你必須有具體路線爲每個項目，您將需要得到你的手髒與Dynamic Routing。

來源

2017-02-21 21:46:18

React路由器：從Wordpress REST API動態創建頁面

回答

相關問題