React Router：Wordpress REST APIからページを動的に作成

Question

Wordpress REST API JSONオブジェクトから取得した要素の配列を作成しました。私は反応ルータを使用して、それぞれの要素を自分の別のページにします。idをスラッグとして使用します。 （/ items/1）。

私は少し壁にぶつかり、反応ルータを使用して経路を動的に作成する方法を理解できませんでした。どんな指導も大歓迎です!!!あなたはおそらく取りたい

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

Answer 1

アプローチは、ないに各項目の具体的なルートを作成し、代わりにparamを使用しています。

あなたpathはこのような何かを見ることができる：

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

は、これはあなたがItemPageコンポーネントでitemIdを取得し、正しいコンテンツをロードすることができます。有効なアイテムに対応していないIDを取得した場合は、エラーページまたは好きなページにリダイレクトします。

あなたは次のようにItemPageの小道具にitemIdのparamにアクセスすることができます：あなたは本当にあなたが項目ごとに特定のルートを持たなければならないと感じた場合、あなたはDynamic Routingで手が汚れて取得する必要があります

this.props.params.itemId 

。