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动态创建页面

回答

相关问题